V-for解构的方法是什么

本篇内容主要讲解“V-for解构的方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“V-for解构的方法是什么”吧!

我们提供的服务有：成都网站建设、网站制作、微信公众号开发、网站优化、网站认证、顺义ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的顺义网站制作公司

之所以起作用，是因为 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中获取索引：

当使用一个对象时，你也可以捕获 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>

上面会打印每个字符。

到此，相信大家对“V-for解构的方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

本文题目：V-for解构的方法是什么
文章位置：https://www.cdcxhl.com/article20/pjicjo.html

成都网站建设公司_创新互联，为您提供、云服务器、网站内链、网站排名、小程序开发、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联