vue的注意规范之v-if 与 v-for 一起使用教程
更新时间：2019年08月04日 08:57:28 作者：疯三年
这篇文章主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中
所以，不推荐v-if和v-for同时使用
使用推荐方式：
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
或者：放在计算属性遍历
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码只传递了未完成的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
总结
以上所述是小编给大家介绍的vue的注意规范之v-if 与 v-for 一起使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
本篇文章主要介绍了vue.js单页面应用实例的简单实现，使用单页应用，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验。2017-04-04
今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
vue-router 按需加载 component: () => import() 报错的解决
这篇文章主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。这篇文章主要介绍了在vue项目中引用Iview的方法,需要的朋友可以参考下2018-09-09
本篇文章主要介绍了基于vue-cli的vuex配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值2022-09-09
本篇文章主要介绍了vue-cli开发环境跨域问题解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-06-06
这篇文章主要给大家介绍了关于vue3页面组件中怎么获取上一个页面的路由地址的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
本文主要介绍了Vite2+Vue3渲染Markdown文档的方法实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
这篇文章主要介绍了nuxt使用vuex存储及获取用户信息踩坑的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论