当v-if和v-for需要同时使用的时候

一粒程序米

已于 2022-06-07 08:41:54 修改

阅读量235

点赞数 1

分类专栏：前端Vue笔记避坑大合集文章标签：前端 v-if v-for

于 2022-06-06 21:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43449246/article/details/125149511

版权

避坑大合集同时被 2 个专栏收录

15 篇文章

订阅专栏

前端Vue笔记

9 篇文章

订阅专栏

本文介绍了在 Vue 中如何优化 v-for 指令的使用，以避免性能浪费。错误的做法是在 v-for 循环中同时使用 v-if，这会导致每次循环都进行条件判断。正确的解决方案是利用 computed 属性筛选需要显示的列表，如 `activeItemList`，然后在模板中使用这个计算属性。这样可以提高渲染效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当使用v-for的时候需要选择性地隐藏部分item
本来的错误写法是这样：

 <div class="card-view-item" v-for="(item,index) in cardList" :key="index" v-if="item.show"> </div>

在data里声明的cardList

  cardList:[
        {
          title:'夜间睡眠',
          time:'12/1',
          show:true,
        },
        {
          title:'步数和热量',
          time:'12/1',
          show:false,
        },
      ]

以上的那种用法是错误的。v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。

下面是正确用法：
我们可以利用computed：

computed: {
	activeItemList: function() {
		return this.cardList.filter((item) => {
			return item.show
		})
	}
}

 <div class="card-view-item" v-for="(item,index) in activeItemList" :key="index" > </div>

这样就可以了