v-for和v-if一起使用的正确方法

博客指出在Vue里,当需选择性渲染列表或避免渲染隐藏项时,可能会同时使用v-for和v-if。但v-for优先级高于v-if,同时使用会造成性能浪费。针对不同情况给出解决办法,一是用计算属性computed,二是将v-if放到父元素或包裹元素上。

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

当出现两个情况的时候,我们可能需要会想到将v-for和v-if同时使用:

  • 选择性地渲染列表,例如根据某个特定属性来决定是否渲染
	<div v-for="item in itemList" v-if="item.isShow">{{item.value}}</div>
  • 避免渲染本该隐藏的列表项
<div v-for="item in itemList" v-if="shouldShowItem">{{item.value}}</div>

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

对于第一种情况,使用计算属性computed:

computed: {
	activeItemList: function() {
		return this.itemList.filter((item) => {
			return item.isActive
		})
	}
}
<div v-for="item in activeItemList">{{item.value}}</div>

对于第二种情况,将v-if放到循环列表元素的父元素中或使用template将v-for渲染的元素包起来,再在template上使用v-if。

<template v-if="shouldShowItem">
	<div v-for="item in itemList"></div>
</template>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值