vue2
vue2
中,当 v-if
与 v-for
一起使用时,v-for
具有比 v-if
更高的优先级。
vue3
vue3
中,当 v-if
与 v-for
同时存在于一个节点上时,v-if
比 v-for
的优先级更高。注意此处与vue2
中是相反的。
不推荐一起使用
无论2中还是3中,都不推荐一起使用 v-if
与 v-for
。
推荐用法
vue3
文档中推荐写法如下。
在外新包装一层 <template>
再在其上使用 v-for
可以解决这个问题 (这也更加明显易读):
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>