避免v-if和v-for同时使用在一个元素

263 阅读1分钟

永远不要把 v-if 和 v-for 同时用在同一个元素上

在写练习的时候发现在严格模式下,v-for和v-if同时使用的时候出现error报错。 查询了一下相关资料,发现官网有很详细的解释。

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级

一般两者会同时使用,有以下两种情况:
1、为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
具体做法在computed()中users提前过滤:
computed(){
activeUsers:function(){
return this.users.filter(function(user){
return user.isActive
})
}
}

2、为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下,请将 v-if 从li移动至容器元素上 (比如 ul、ol)。