在一个列表中,如果同时要遍历,并且根据某个条件控制某个列表项是否显示,如下代码是错误的:
<ul><li v-for="item in list" v-if="item.show" :key="item.id">{{item.name}}</li>
</ul>
当v-if和v-for同时存在于一个节点上时,v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。 也就是无法访问item。
如果需要这种功能,中间加入一层template即可解决:
<ul><template v-for="item in list" :key="item.id"><li v-if="item.show">{{item.name}}</li></template>
</ul>