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

开发 前端
最近发现我们可以使用v-for进行解构。之所以起作用,是因为 Vue 将v-for的整个第一部分直接提升到函数的参数部分。

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

[[331505]]

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

  1. <li v-for="____ in array"
  2. </li> 
  3. function (____) { 
  4.   //... 

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

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

  1. <li v-for="{ 
  2.   // Set a default 
  3.   radius = 20, 
  4.  
  5.   // Destructure nested objects 
  6.   point: { x, y }, 
  7. in circles"> 

其他 v-for 技巧

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

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

  1. <li v-for="(value, keyin { 
  2.   name'Lion King'
  3.   released: 2019, 
  4.   director: 'Jon Favreau'
  5. }"> 
  6.   {{ key }}: {{ value }} 
  7. </li> 

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

  1. <li v-for="(value, keyindexin { 
  2.   name'Lion King'
  3.   released: 2019, 
  4.   director: 'Jon Favreau'
  5. }"> 
  6.   #{{ index + 1 }}. {{ key }}: {{ value }} 
  7. </li> 

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

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

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

字符串和 v-for

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

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

  1. <p v-for="character in 'Hello, World'"
  2.   {{ character }} 
  3. </p> 

 上面会打印每个字符。

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

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

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

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2021-01-15 05:39:13

HashMapHashTableTreeMap

2020-07-14 08:43:54

VueHTML函数

2015-07-22 11:53:29

云计算AWS分析瘫痪

2021-08-24 00:13:23

Windows 10Windows微软

2020-07-07 08:35:53

VueKey组件

2021-08-27 10:03:12

人工智能AI

2020-11-20 06:13:04

Like %

2019-01-07 09:27:39

2022-12-05 15:23:33

JavaScript技巧运算符

2018-08-10 10:36:25

SSL证书误区

2020-07-01 08:36:43

CSS规范web

2019-12-13 19:52:29

人工智能AI

2023-06-05 08:07:34

聚集索引存储数据

2021-08-08 21:53:40

Arthas指令表达式

2021-01-12 12:33:20

Pandas技巧代码

2021-01-07 05:27:20

包导入变量

2022-06-23 13:13:36

GitHub开发技巧

2021-05-08 23:19:25

微信存储小程序

2019-03-25 15:21:42

浏览器 Edge 微软

2021-11-02 19:14:58

Spring数据
点赞
收藏

51CTO技术栈公众号