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

当出现两个情况的时候，我们可能需要会想到将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>