当前位置:首页 > 编程笔记 > 正文
已解决

vue中v-for和v-if同时使用的解决办法

来自网友在路上 172872提问 提问时间:2023-09-28 06:00:29阅读次数: 72

最佳答案 问答题库728位专家为你答疑解惑

        在一个列表中,如果同时要遍历,并且根据某个条件控制某个列表项是否显示,如下代码是错误的:

<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>

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"vue中v-for和v-if同时使用的解决办法":http://eshow365.cn/6-15055-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!