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

177 阅读1分钟

在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用。
在 vue 3.x 中,v-if 总是优先于 v-for 生效。

1、选择性地渲染列表,例如根据某个特定属性来决定是否渲染,使用计算属性computed:

<div v-for="item in inHouseList" v-if="item.is_expired === 1">{{item.bar_code}}</div>
computed: {
	activeinHouseList: function() {
		return this.inHouseList.filter((item) => {
			return item.is_expired === 1 
		})
	}
}
<div v-for="item in activeinHouseList">{{item.bar_code}}</div>

2、 避免渲染本该隐藏的列表项,将v-if放到循环列表元素的父元素中或使用template将v-for渲染的元素包起来,再在template上使用v-if。

<div v-for="item in inHouseList" v-if="isExpired === 1 ">{{item.bar_code}}</div>
<template v-if="isExpired === 1">
	<div v-for="item in inHouseList"></div>
</template>

总结: vue2.x 中v-for优先级高于v-if,vue3.x 相反
尽量避免在同一个元素上面同时使用v-if和v-for,建议使用计算属性替代