vue2中v-if与v-for如何合理地同时使用

vue2中v-if与v-for如何合理地同时使用

场景如下:

• 有选择遍历,根据某个属性判断是否渲染

<div v-for="item in itemList" v-if="item.isShow">{{item.value}}</div>

在vue2中,v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。这与vue3是相反的,但我们不展开来讲了,可以使用计算属性写一个函数单独判断是否需要渲染,示例代码如下:

computed: {
	activeItemList: function() {
		return this.itemList.filter((item) => {
			return item.isActive
		})
	}
}

然后这样使用

<div v-for="item in activeItemList">{{item.value}}</div>