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

前端小智 2020/6/30 14:26:24

作者:Michael Thiessen译者:前端小智来源:medium点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。最近发…
作者:Michael Thiessen
译者:前端小智
来源:medium
点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

最近发现我们可以使用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>

上面会打印每个字符。

clipboard.png


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

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


交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[很多人不知道 v-for 可以这样解构!]http://www.zyiz.net/tech/detail-141589.html

上一篇:使用 localStorage 实现多页面通信

下一篇:前端常用插件、工具类库汇总

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程