vue中将多个元素包装成一个非情感元素标签

Question

我有这个 html，它为表元素创建可扩展的行，但是它的方法是这样的：

<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>

它适用于静态值。

然而此时，我想使用 Vue 并使用 av-for作为我的列表。但由于有两个<tbody>元素，首先，我不能v-for直接使用，其次（因为我无法将它们包装在 a 中<div>以获得单个父元素）我无法创建组件。

我的问题是：有没有一种方法可以用作非情感元素标签，我可以将这些多个tbody元素包装到其中，以便我可以进行循环？

<template>
   <non-affective-tag v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </non-affective-tag>
</template>

---

在这里你可以看到小提琴：

https://jsfiddle.net/jeaxopwf/2/

在下面，您可以看到示例：

<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>
<tbody class="js-table-sections-header">Parent row</tbody>
<tbody>Multiple rows</tbody>

<template>
   <non-affective-tag v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </non-affective-tag>
</template>

$('.js-table-sections-header').click(function() {
	$(this).toggleClass('open');
})

Answer 1

您可以将标签与 一起使用templatev-for。

<template>
   <template v-for="x in myList">
       <tbody class="js-table-sections-header">One row</tbody>
       <tbody>Multiple rows</tbody>
   </template>
</template>