博主:DongJiang
码龄:7年
等级:
文章:631
访问:52336
博客简介:DongJiang的博客
博客创建时间:2018-04-12
给博主送颗小红心
1002
后台管理系统: 进入后台

指令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

原文出处:
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。