博主:DongJiang
码龄:7年
等级:LV.22级
文章:631
访问:5233623
博客简介:记录与分享
博客创建时间:2018-04-12
他的博客主页 立即前往

友情链接

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

来源: 2023-07-02 15:38:05

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

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