指令v-if和v-for的使用注意事项

1、提示：指令v-if和v-for不能用在同一个标签上，否则性能会消耗很大。

2、原因：如果写在同一标签，会先对所有数据进行以下操作，就是一边循环一边执行v-if，循环中多次对 DOM 元素进行添加或删除，这样会造成大量的性能消耗

3、优先级：v-for 优先级高于v-if

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

4、解决办法

1.不要把v-for和v-if 写在同一个标签上，而是新建div引入v-for包裹v-if

2.使用v-show代替v-if

原文出处：