理解
两者的优先级
两种应用场景
先遍历,再判断时
- 由于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>