首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

Vue使用注意事项:v-for和v-if不要一起使用

Sonder
2020-07-22
546字
1分钟
浏览 (2.2k)

原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

复制代码
<ul>
   <li
     v-for="user in users"
     v-if="user.isActive"
     :key="user.id"
   >
     {{ user.name }}
   </li>
</ul>

如上情况,即使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>

转载于:https://www.jianshu.com/p/0f6fb67b3e3e

下一篇 / 如何给ul下的li标签绑定事件

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)