用好Vue中v-for循环的7种方法

Vue 中的 v-for 循环允许你在模板代码中编写 for 循环，尤其是当我们做下面的操作时非常有用：

成都创新互联为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到成都做网站、成都网站设计、成都外贸网站建设， 我们的网页设计师为您提供的解决方案。

• 渲染数组或列表
• 遍历对象属性

在最基本的用法中，v-for 循环是这样使用的：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

不过它还有一些你不知道的用法，可以使你的 v-for 代码更加精确、和高效。

1. 始终在 v-for 循环中使用 key

首先要讨论的很多人都已经知道的一种用法：在 v-for 循环中使用 key。通过设置唯一的 key 属性，可以确保你的组件按期望的方式工作。

如果我们不使用 key，vue 将会使 DOM 尽可能的高效。这可能意味着 v-for 元素可能出现乱序或其他不可预测的行为。

如果我们对每个元素都有一个唯一的键引用，那可以更好地预测 DOM 将会如何被操纵。

 
 
 
 

  
  
  
  
 
  
  
  
  
  
  
  
  
  
    v-for='product in products' 
  
  
  
  
    :key='product._id'   
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

2. 用 v-for 在一个范围内进行循环

虽然大多数情况下 v-for 用于遍历数组或对象，但肯定存在我们可能只想迭代特定次数的情况。

假设我们要网店创建一个分页系统，并且想在每页只显示 10 个商品品。通过使用变量来跟踪我们当前的页码，可以像这样处理分页：

 
 
 
 

  
  
  
  
looping over a range
 
  
  
  
  
   
  
  
  
  
    {{ products[page * 10 + index] }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

3. 避免在循环中使用 v-if

在 v-for 循环中错误地使用 v-if 来过滤数据[1] 是非常常见的。

虽然这样做看起来很直观，但它会导致一个巨大的性能问题—— vue 的 v-for 优先于 v-if 指令 [2]。

这意味着你的组件会遍历每一个元素，然后检查 v-if 条件查看它是否应该被渲染。

如果把 v-if 与 v-for 放在一起使用，无论你的条件是什么，都会将遍历数组的每一个元素。

 
 
 
 

  
  
  
  
// 不好的代码 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
    v-for='product in products'  
  
  
  
  
    :key='product._id'  
  
  
  
  
    v-if='product.onSale' 
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

上面的代码会引发什么题呢?

假如我们的商品数组中有几千个项目，但是只有 3 个处于销售状态产品需要渲染。那么每次重新渲染时，即使销售的 3 种产品根本没有变化，vue 也必须遍历几千个项目。所以应该尽量避免这种情况。

接下来是两种替代方案，而不是把 v-for 与 v-if 放在一起用。

4. 改用计算属性或方法

为了避免上述问题，应该在我们的模板中迭代之前先过滤这些数据。有两种非常相似的方法可以做到：

• 使用计算属性
• 使用过滤方法

至于用哪种方法你自己说了算。下面对两者进行简单的介绍。

首先需要设置一个计算属性。为了打到与之前使用 v-if 相同的效果，代码应该是这样：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
// ... 
  
  
  
  
 
 
 
 
 

这样做有几个好处：

• 数据属性只会在依赖项发生变化时才会被重新评估
• 模板只会遍历在售商品，而不是每一个项目

第二种方法的代码几乎和前面一样：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
// ... 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

5. 把循环放到包装元素中

有时候你可能想把 v-for 与 v-if 结合起来使用，用来确定是否需要渲染一个列表。

假如我们只想在用户登录时渲染商品列表该怎么办。

 
 
 
 

  
  
  
  
// 不好的代码 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
    v-for='product in products'  
  
  
  
  
    :key='product._id'  
  
  
  
  
    v-if='isLoggedIn'  
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

上面的代码会有什么问题?

和前面一样， vue 模板会优先考虑 v-for ，所以它会遍历每个元素并检查 v-if。

即使最终什么都不渲染，也会遍历几千个元素!

比较简单的解决方案是给代码的 v-if 语句换个位置。

 
 
 
 

  
  
  
  
// 这样比较好 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    v-for='product in products'  
  
  
  
  
    :key='product._id'  
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

这要好很多，因为如果 isLoggedIn 为 false 的话根本不需要进行迭代。

6. 在循环中访问索引

除了遍历数组并访问每个元素之外，还可以跟踪每个项目的索引。

为了达到这个目的，必须在我们的项目之后添加一个索引值。这非常简单，对于分页、显示列表索引、显示排名等操作都很有用。

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    Product #{{ index }}: {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

7. 迭代对象

到目前为止，我们只真正研究了用 v-for 遍历数组。但是我们可以很容易地迭代对象的键值对。

与访问元素的索引类似，我们必须向循环中添加另一个值。如果用单个参数循环对象的话将会循环所有项目。

如果我们再添加一个参数，将会得到 item 和 key。如果添加第三个还可以访问 v-for循环的 index。

假设要遍历商品的每个属性，代码应该是这样：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
      {{ item }} 
  
  
  
  
     
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

分享标题：用好Vue中v-for循环的7种方法
地址分享：http://www.shufengxianlan.com/qtweb/news19/222769.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联