
正文
vue中v-if和v-for优先级
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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>
喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”








