乐趣区

关于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 的确反对对 MapSet 对象进行迭代,然而因为它们在 Vue 2.x 中不具备响应性,因而其用处十分无限。咱们还能够在此处应用任何 Iterable,包含生成器。

顺便说一句,我有时应用 MapSet,但通常仅作为两头对象来进行计算。例如,如果我须要在列表中查找所有惟一的字符串,则能够这样做:

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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版