热搜: fiddler git ip 代理
历史搜索

原来我们也可以使用 v

游客2024-11-09 07:53:02
目录文章目录
  1. 其他 v-for 技巧
  2. 字符串和 v-for
  3. 结语

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

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

<li v-for="____ in array">
</li>
function (____) {
  //...
}

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

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

<li v-for="{
  // 设置默认值
  radius = 20,

  // 分解嵌套对象
  point: { x, y },
} in circles">

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

其他 v-for 技巧

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

<li v-for="(item, index) in [
  'Zhangsan',
  'Lisi',
  'Wangwu'
]">
  {{ index + 1 }} - {{ item}}
</li>

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

<li v-for="(value, key) in {
  name: 'Zhangsan',
  released: 2022,
  director: 'Jack',
}">
  {{ key }}: {{ value }}
</li>

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

<li v-for="(value, key, index) in {
  name: 'Zhangsan',
  released: 2022,
  director: 'Jack',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

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是如何实现的时候才发现了它:

<p v-for="character in 'Hello, World'">
  {{ character }}
</p>

上面会打印每个字符。

原来我们也可以使用 v 1

结语

以上就是关于使用 v-for 进行解构得所有内容,希望对你有用。

标签:v-for