最近发现我们可以使用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,包括生成器。
顺便说一句,我有时使用Map
或Set
,但通常仅作为中间对象来进行计算。 例如,如果我需要在列表中查找所有唯一的字符串,则可以这样做:
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 神仙调试工具