很多人不知道 V-for 可以这样解构

 最近发现我们可以使用v-for进行解构。

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了泰宁免费建站欢迎大家使用！

之所以起作用，是因为 Vue 将v-for的整个第一部分直接提升到函数的参数部分：

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
function (____) { 
  
  
  
  
  //... 
  
  
  
  
} 
 
 
 

然后，Vue 在内部使用此函数来渲染列表。

这说明可以放在函数中括号中的任何有效Javascript也可以放在v-for中，如下所示：

 
 
 
 
  
  
  
  
  
  
  
  
  // Set a default 
  
  
  
  
  radius = 20, 
  
  
  
  
 
  
  
  
  
  // Destructure nested objects 
  
  
  
  
  point: { x, y }, 
  
  
  
  
} in circles"> 
 
 
 

其他 v-for 技巧

众所周知，可以通过使用如下元组从v-for中获取索引：

当使用一个对象时，你也可以捕获 key:

 
 
 
 
  
  
  
  
  
  
  
  
  name: 'Lion King', 
  
  
  
  
  released: 2019, 
  
  
  
  
  director: 'Jon Favreau', 
  
  
  
  
}"> 
  
  
  
  
  {{ key }}: {{ value }} 
  
  
  
  
  
 
 

还可以将这两种方法结合使用，获取属性的键和索引:

 
 
 
 
  
  
  
  
  
  
  
  
  name: 'Lion King', 
  
  
  
  
  released: 2019, 
  
  
  
  
  director: 'Jon Favreau', 
  
  
  
  
}"> 
  
  
  
  
  #{{ index + 1 }}. {{ key }}: {{ value }} 
  
  
  
  
  
 
 

Vue 确实支持对 Map 和Set对象进行迭代，但是由于它们在 Vue 2.x 中不具有响应性，因此其用途非常有限。 我们还可以在此处使用任何 Iterable，包括生成器。

顺便说一句，我有时使用Map或Set，但通常仅作为中间对象来进行计算。 例如，如果我需要在列表中查找所有唯一的字符串，则可以这样做：

 
 
 
 
  
  
  
  
computed() { 
  
  
  
  
  uniqueItems() { 
  
  
  
  
    // 从数组创建一个Set，删除所有重复项 
  
  
  
  
    const unique = new Set(this.items); 
  
  
  
  
 
  
  
  
  
    // 将该 Set 转换回可用于 Vue 的数组 
  
  
  
  
    return Array.from(unique); 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 

字符串和 v-for

你知道吗，还可以使用v-for遍历字符串?

文档中没有这一点，我只是在通读代码以弄清楚v-for是如何实现的时候才发现了它:

 
 
 
 
  
  
  
  
 
  
  
  
  
  {{ character }} 
  
  
  
  
 
 
 
 

 上面会打印每个字符。

作者：Michael Thiessen 译者：前端小智 来源：medium

原文：https://forum.vuejs.org/t/destructuring-rest-parameter/23332

本文转载自微信公众号「 大迁世界」，可以通过以下二维码关注。转载本文请联系前端小智公众号。

当前标题：很多人不知道 V-for 可以这样解构
当前地址：http://www.csdahua.cn/qtweb/news0/489700.html

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

广告

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