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

原文出处:http://www.dongblog.com/notes/29.html
来源:博客网 转载请注明出处!

活跃用户

diandian
Ta还没有签名
杨_阳-扬
Ta还没有签名
睡到自然醒
Ta还没有签名
諟菈洣蘇-sweety
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093