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

当出现两个情况的时候，我们可能需要会想到将v-for和v-if同时使用：

选择性地渲染列表，例如根据某个特定属性来决定是否渲染

   <div v-for="item in itemList" v-if="item.isShow">{{item.value}}</div>

避免渲染本该隐藏的列表项

<div v-for="item in itemList" v-if="shouldShowItem">{{item.value}}</div>

事实上，v-for的优先级是高于v-if的，如果两者同时使用，那么即使100个item中只有一个符合v-if的情况，也需要循环整个数组，造成性能上的浪费。

对于第一种情况，使用计算属性computed：

<div v-for="item in activeItemList">{{item.value}}</div>


computed: {
    activeItemList: function() {
        return this.itemList.filter((item) => {
            return item.isActive
        })
    }
}

对于第二种情况，如果希望由条件的跳过循环的执行。那么应该将v-if置于外层元素上。例如，在一个电商网站的产品列表页面中，通常会判断一下这个列表中的产品数量。如果列表是空的，那就显示一句提示语，而不再显示列表，代码如下

<divid="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>

可以看到，上述代码先在外层<div>标记中判断想要迭代的数组的长度，如果数组的长度为0，那
就不需要执行 v-for 了，直接显示“没有找到您搜索的产品” 这句提示语就可以了。