小编给大家分享一下v-for和v-if 并用时筛选条件的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
如下所示：
<ul id="ul">
<li v-for="todo in todos" v-if="todo<4">
{{ todo }}
</li>
</ul>
<script>
varvm=new Vue({
el:"#ul",
data:{
todos: [ 1, 2, 3, 4, 5 ]
}
})
</script>说明：在处于同一节点的时候，v-for 优先级比 v-if 高。先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。
v-if="todo<4" 会筛选 符合 <4 的 todo 项
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：
<ul id="ul" v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
<p v-else>
no todo left!
</p>
</ul>
<script>
varvm=new Vue({
el:"#ul",
data:{
todos: [ 1, 2, 3, 4, 5 ]
}
})
</script>以上是“v-for和v-if 并用时筛选条件的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
