v-for与v-if 同使用的注意事项

除非必要，否则不要将 v-if和 v-for 用在同一个元素上。

当它们处于同一节点时，v-for 的优先级比 v-if 高，v-for 每次迭代时都会执行一次 v-if,这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。

<div id="app">
        <p v-for="item in filteredList" v-bind:key="item.id">
            {{item.name}}
        </p>
    </div>

    computed:{
        filteredList(){
            return this.list.filter(function(item) {
                // 返回id小于2的项斌添加到filteredList数组中
                return item.id < 2
            })
        }
    }

另一种场景是,如果希望有条件地跳过循环的执行，那么应该将 v-if置于外层元素上。例如，在一个电商网站的产品列表页面中,通常会先判断一下这个列表中的产品数量。如果列表是空的(例如没有搜索到用户查找的产品)，那就显示一句提示语，而不再显示列表，代码如下:

<div id="app">
   <div v-if="products.length == 0">没有找到您搜索的产品</div> 
   <div v-else> 
      <p v-for="item in products" :key="item.id"> 
        名称:{{item.name}} 价格:{{item.price}} 
      </p > 
   </div> 
</div>

Vue.js 的两个关键指令V if 指令和 v-for 指令，它们分别用于条件渲染和列表渲染。

v-if 指令需要与 v-show 指令今分开使用。

v-for 指令需要 key 属性的配合，此外还要留意数组元素更新时的限制情况