vue不要在同个元素上同时使用v-if和v-for指令

小编给大家分享一下vue不要在同个元素上同时使用v-if和v-for指令，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

不要在同个元素上同时使用v-if和v-for指令

为了过滤数组中的元素，我们很容易将v-if与v-for在同个元素同时使用。

// 不好的做法
<div v-for='product in products' v-if='product.price < 500'>

问题是在 Vue 优先使用v-for指令，而不是v-if指令。它循环遍历每个元素，然后检查v-if条件。

this.products.map(function (product) {
 if (product.price < 500) {
  return product
 }
})

这意味着，即使我们只想渲染列表中的几个元素，也必须遍历整个数组。

这对我们来当然没有任何好处。

一个更聪明的解决方案是遍历一个计算属性，可以把上面的例子重构成下面这样的：

<div v-for='product in cheapProducts'>
 
computed: {
 cheapProducts: () => {
  return this.products.filter(function (product) {
   return product.price < 100
  })
 }
}

这么做有几个好处：

• 渲染效率更高，因为我们不会遍历所有元素

• 仅当依赖项更改时，才会重使用过滤后的列表

• 这写法有助于将组件逻辑从模板中分离出来，使组件更具可读性

看完了这篇文章，相信你对“vue不要在同个元素上同时使用v-if和v-for指令”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！