Vue中v-if和v-for的一起使用时的几种处理方式
在处于同一节点的时候,v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环,然后在每一个v-for 的循环中,再进行 v-if 的条件对比。所以,不推荐v-if和v-for同时使用。1、template<template v-for="(item, index) in list" :key="index"&g...
·
在处于同一节点的时候,v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环,然后在每一个v-for 的循环中,再进行 v-if 的条件对比。所以,不推荐v-if和v-for同时使用。
1、template
<template v-for="(item, index) in list" :key="index">
<div v-if="item.isShow">{{item.title}}</div>
</template>
2、计算属性(推荐使用)
<template>
<div>
<div v-for="(user,index) in activeUsers" :key="user.index" >
{{ user.name }}
</div>
</div>
</template>
<script>
export default {
name:'A',
data () {
return {
users: [{name: 'aaa',isShow: true},
{name: 'bbb',isShow: false}]
};
},
computed: {//通过计算属性过滤掉列表中不需要显示的项目
activeUsers: function () {
return this.users.filter(function (user) {
return user.isShow;//返回isShow=true的项,添加到activeUsers数组
})
}
}
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)