永远不要把 v-if 和 v-for 同时用在同一个元素上。
在下面代码中可以实现对列表的条件渲染,但是v-for和v-if不推荐同时使用, 因为当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中
<ul>
<li v-for='user in users' :key="user.id" v-if="user.isActive">{{item.name}}</li>
</ul>
常用的解决方法:
- 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。 在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
<ul>
<li v-for='user in activeUsers'>{{user.name}}</li>
</ul>
<script>
data() {
return {
users:[
{id:1,name:"张三",isActive:true},
{id:2,name:"李四",isActive:true},
{id:3,name:"王麻子",isActive:false}
],
}
},
computed:{
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
</script>
- 使用
<template></template>
,此方法类似于 v-if,你也可以利用带有 v-for 的<template>
来循环渲染一段包含多个元素的内容。比如:
<ul>
<template v-for='user in users'>
<li v-if='user.isActive'>{{user.name}}</li>
</template>
</ul>