Vue2 v-if 和 v-for不建议一起使用

v-if 和 v-for

现象：在Vue2中，v-for的优先级是高于v-if，同时使用的话，每次循环都会遍历整个列表，造成资源浪费。所以实践中不应该把v-for和v-if放一起使用。

解决：使用计算属性过滤列表数据

<!-- 返回数组前五个元素 -->
<div v-for="(item, index) in dataListFive" :key="index">
	{{ item.title }}
</div>

<!-- 返回前active为true的元素 -->
<div v-for="(item, index) in dataListActive" :key="'a' + index">
	{{ item.title }}
</div>

data() {
	return {
		dataList: [
			{ id: 1, title: "第1个", active: false},
			{ id: 2, title: "第2个", active: true},
			{ id: 3, title: "第3个", active: true},
			{ id: 4, title: "第4个", active: true},
			{ id: 5, title: "第5个", active: false},
			{ id: 6, title: "第6个", active: false},
			{ id: 7, title: "第7个", active: false},
		]
	}
}

computed: {
// 返回前5个元素
 dataListFive: function () {
   return this.dataList.filter((item, index) => {
     return index < 5;
   });
 },
 // 返回前active为true的元素
 dataListActive: function () {
   return this.dataList.filter(item => {
     return item.active === true;
   });
 }
}