Vue 3 中的 v-for 指令

详解

在Vue.js 3中，v-for 指令依然是一个强大且灵活的工具，用于在模板中遍历数组或对象，并生成相应的DOM元素。 然而，Vue 3对 v-for 进行了一些改进，使其更加强大和直观。

基本用法

在模板中使用 v-for，你可以通过以下方式遍历数组：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];
</script>

上述代码中， 遍历了 v-for items 数组，并为每个数组项生成了一个 元素。 为了确保在列表更新时每个元素<li>:key 属性，并将其设置为每个数组项的唯一标识（例如，item.id）。

在对象上使用 v-for

<template>
  <ul>
    <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>

<script setup>
const user = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
};
</script>

这里， 遍历了 对象的属性，并为每个属性生成了一个 v-for user <li> 元素。 在这个例子中， 是属性名， 是属性值。key value

迭代数字

除了数组和对象，v-for 还可以用于迭代数字。 你可以通过 of 关键字来指定迭代的范围：

<template>
  <ul>
    <li v-for="n of 5" :key="n">Item {{ n }}</li>
  </ul>
</template>

上述代码会生成包含五个 元素的列表，每个元素显示 "Item 1" 到 "Item 5"。<li>

v-for 的其他用法

迭代对象的值：

<template>
  <ul>
    <li v-for="value in Object.values(user)" :key="value">{{ value }}</li>
  </ul>
</template>

<script setup>
const user = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
};
</script>

带有索引的迭代：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = [
  { name: 'Item 1' },
  { name: 'Item 2' },
  { name: 'Item 3' },
];
</script>

 在这份关于 Vue 3 中 的简介中，我们涵盖了基本用法以及一些常见的用例。 通过灵活运用 v-for，你可以更加高效地渲染列表和迭代数据，为用户提供更好的交互体验。