vue使用注意事项：v-for和v-if不要一起使用

Posted 2021-03-01 xxr0218

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>

转自 https://www.jianshu.com/p/0f6fb67b3e3e