34.Vue中v-if和v-for的一起使用.md

Vue中v-if和v-for的一起使用时的几种处理方式

在处于同一节点的时候，v-for优先级比v-if高。这意味着v-if将分别重复运行于每个v-for循环中。即——先运行v-for的循环，然后在每一个v-for的循环中，再进行v-if的条件对比。所以，不推荐v-if和v-for同时使用。

template

<template v-for="(item, index) in list" :key="index">	
    <div v-if="item.isShow">{{item.title}}</div>
</template>

计算属性（推荐使用）

<template>
 <div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
</template>
<script>
export default {
  name:'A',
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: { // 通过计算属性过滤掉列表中不需要显示的项目
	activeUsers: function () {
	  return this.users.filter(function (user) {
		return user.isShow; // 返回isShow=true的项，添加到activeUsers数组
	  })
	}
  }
};
</script>