为什么v-if和v-for不能一起用

1.v-if和v-for使用方法：

<div v-if="isShow">hello</div>  // 当变量isShow变量为true时，hello才会显示在页面上

// 在页面中打印出数组showList中的每一项
 <div v-for="(item,index) in showList" :key="index">{{item}}</div>

2.v-for的优先级是高于v-if的，如果一个元素同时用v-if和v-for，就相当于：列表会先全部遍历出来，再一个一个判断是否显示，会造成渲染了无用的dom节点，造成性能方面的浪费。

3.替换写法：

（1）可以在外层标签写v-if，内存标签写v-for，那样就会先执行v-if判断，在进行v-for循环。

<div v-if="isShow">
      <div v-for="(item,index) in showList" :key="index">{{item}}</div>
</div>

（2）如果是要在循环的同时进行条件判断，那么可以在计算属性computed中写过滤filter。

computed: {
  showList() {
        return [1, 2, 3, 4, 5].filter(item => item !== 3)
    }
}