vue基础之v-for和v-if优先级的问题

错误示范：v-for和v-if在同一标签里

<div v-for="(item,index) in list" :key="index" v-if="item.name">    
</div>

这样写会在控制台中出现警告，因为每次循环都会执行一次条件判断（先循环后判断），带来不必要的性能消耗。

正确写法：

<div v-for="(item,index) in list">
    <div :key="index" v-if="item.name"></div>   
</div>

避免不必要的性能消耗，可以采用嵌套写法。

其它案例：

先判断后渲染

<div v-if="show">
    <div v-for="item in list">
        <p>{{item.name}}</p>
    </div>
</div>

如果判断条件出现在循环的内部，可灵活运用计算属性computed过滤干扰项

computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.show
      })
    }
}