您当前的位置: 首页 > 

@大迁世界

暂无认证

  • 3浏览

    0关注

    739博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

@大迁世界 发布时间:2020-06-29 08:27:00 ,浏览量:3

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

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



function (____) {
  //...
}

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

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


你可以在这里为非作歹,只是不要太疯狂????。

其他 v-for 技巧

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


  {{ index + 1 }} - {{ movie }}

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


  {{ key }}: {{ value }}

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


  #{{ index + 1 }}. {{ key }}: {{ value }}

Vue 确实支持对 Map 和Set对象进行迭代,但是由于它们在 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是如何实现的时候才发现了它:


  {{ character }}

上面会打印每个字符。

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

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

相关热门推荐

小智最近在学习正则,学习过程中发现这 6 个方便的正则表达式

详解 ES10 中 Object.fromEntries() 的缘起

有哪些被低估未被广泛使用的有用的 HTML标签?

【干货】工业软件为什么这么难?

JS执行上下文的两个阶段做了些啥?

为了反对种族歧视,代码托管平台GitHub可能要改术语了

【第 244 期】小智周末学习发现了 10 个好用JavaScript图像处理库

【第 243 期】前端!7个快速发现 bug 神仙调试工具

关注
打赏
1664287990
查看更多评论
立即登录/注册

微信扫码登录

0.0373s