v-for和v-if不应该一起使用,必要情况下可以替换成computed属性。
原因:v-for比v-if优先,如果每一次都遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
如上情况,可以采用Computed计算属性
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>