关于javascript:很多人不知道-vfor-可以这样解构

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

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

最近发现咱们能够应用v-for进行解构。

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

<li v-for="____ in array"></li>

function (____) {  //...}

而后，Vue 在外部应用此函数来渲染列表。

这阐明能够放在函数中括号中的任何无效Javascript也能够放在v-for中，如下所示：

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

你能够在这里为非作歹，只是不要太疯狂。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

其余 v-for 技巧

家喻户晓，能够通过应用如下元组从v-for中获取索引：

<li v-for="(movie, index) in [  'Lion King',  'Frozen',  'The Princess Bride']">  {{ index + 1 }} - {{ movie }}</li>

当应用一个对象时，你也能够捕捉 key:

<li v-for="(value, key) in {  name: 'Lion King',  released: 2019,  director: 'Jon Favreau',}">  {{ key }}: {{ value }}</li>

还能够将这两种办法联合应用，获取属性的键和索引:

<li v-for="(value, key, index) in {  name: 'Lion King',  released: 2019,  director: 'Jon Favreau',}">  #{{ index + 1 }}. {{ key }}: {{ value }}</li>

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是如何实现的时候才发现了它:

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

下面会打印每个字符。

编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://forum.vuejs.org/t/des...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

其余 v-for 技巧

字符串和 v-for

交换

字符串和 `v-for`