Vue中的v-if和v-for

理解

两者的优先级

• v-for的优先级高于v-if

两种应用场景

先遍历，再判断时

• 由于v-for优先级大于v-if，所以，可以利用计算属性进行过滤优化

<ul>
	<li 
		v-for = 'item in arr' 
		v-if = 'item.isActive'
		:key = 'user.id'>
		{{item.name}}
	</li>
</ul>
//转变为
<ul>
	<li 
		v-for = 'item in arr' 
		:key = 'user.id'>
		{{item.name}}
	</li>
</ul>

computed:{
	activeUsers:function(){
		return this.arr.filter(function(item){
			return item.isActive
		})
	}
}

先判断再遍历时

• 通过不同标签进行优化

<ul>
	<li 
		v-for = 'item in arr' 
		v-if = 'item.isActive'
		:key = 'user.id'>
		{{item.name}}
	</li>
</ul>
//转换为
<ul v-if="isActive">
  <li
    v-for="item in arr"
    :key="item.id"
  >
    {{ item.name }}
  </li>
</ul>