v-if和v-for谁的优先级高?如何同时使用?
Posted qlongbg
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-if和v-for谁的优先级高?如何同时使用?相关的知识,希望对你有一定的参考价值。
首先:永远不要把 v-if
和 v-for
同时用在同一个元素上。
其次:当 Vue 处理指令时,v-for
比 v-if
具有更高的优先级
1.过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive"
)。在这种情形下,请将 users
替换为一个计算属性 (比如 activeUsers
),让其返回过滤后的列表。
将: <ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li> </ul>
换成:
<ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } }
2.避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers"
)。这种情形下,请将 v-if
移动至容器元素上 。
将: <ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} </li> </ul> 更新为: <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul>
以上是关于v-if和v-for谁的优先级高?如何同时使用?的主要内容,如果未能解决你的问题,请参考以下文章
v-if和v-for可以一起使用吗?哪个优先级比较高?有什么影响?