Vue.js Vue：如何在tbody中有条件地呈现tr

我有一个多行的表体，如下所示：

<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>

...
...

我希望有条件地组合v-if和v-for，以便有条件地呈现一行或多行。Vue手册规定将v-for包装在v-if中，如下所示：

<div v-if="team.positions != null">
    <my-row v-for="position in team.positions"
                :position="position"
                :key="position.id">
    </my-row>
</div>

---

问题是我不能把div放在tbody中，或者任何其他元素中。解决方案是什么？

您可以在同一个标签上使用

v-for

和

v-if

，但是，它的工作方式与您预期的不同

在

v-if

中，您可以引用迭代项，因为

v-for

是在

v-if

之前执行的

这仍然会遍历

团队中的所有
位置
，如果未满足
v-if
中的条件，则不会停止for循环，而是跳过它

你可以这样想：

for（变量i=0；i
在不适合任何元素的情况下，例如：



演示：


newvue({
el:“#应用程序”，
数据：{
showTwoRows：对
}
})

AB
12
34
光盘
切换中间两行
不错。你在两个方面都是对的。我有另一个bug，它抛出了错误……添加
模板
标记的效果非常好。非常感谢！