首页 > 其他 > 详细

vue中v-if和v-for优先级

时间:2019-10-20 12:06:36      阅读:66      评论:0      收藏:0      [点我收藏+]

v-for和v-if不应该一起使用,必要情况下应该替换成computed属性。原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

 
错误写法
<li
  v-for="user in users"
  v-if="user.isActive"
  :key="user.id"
>
  {{ user.name }}
</li>
如上情况,即使100个user中之需要使用一个数据,也会循环整个数组。
 
正确写法
computed: {
    activeUsers: function () {
        return this.users.filter(function (user) {
          return user.isActive
        })
    }
}
<ul>
    <li
          v-for="user in activeUsers"
          :key="user.id"
        >
        {{ user.name }}
    </li>
</ul>

喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”

技术分享图片

 

 

vue中v-if和v-for优先级

原文:https://www.cnblogs.com/qdwds/p/11706932.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!