vue3用v-for遍历输出数组

在Vue 3中，使用`v-for`指令遍历输出数组是一种非常常见和基本的操作。`v-for`指令可以在Vue模板中使用，用于基于源数据多次渲染一个元素或模板块。以下是基本的用法示例：

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

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry']
    };
  }
};
</script>

在这个例子中，`v-for`遍历了`items`数组，并为数组中的每个元素创建了一个`<li>`列表项。`:key`是必须的，它帮助Vue追踪每个节点的身份，从而重用和重新排序现有元素。这里使用了数组的索引作为key，但在实际应用中，通常建议使用能唯一标识每个项的唯一值作为key。

`v-for`也可以用于遍历对象的属性：

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

<script>
export default {
  data() {
    return {
      object: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    };
  }
};
</script>

在这个例子中，`v-for`遍历了一个对象的属性，并在列表中显示了每个属性的键和值。