vue3中v-for用法

在Vue3中，v-for指令的用法与Vue2中基本相同，但有一些细微的变化。

基本语法为：

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

其中，`items`是一个数组，`item`是数组中的每个元素，`index`是数组中对应元素的索引值。`:key`指定了每个元素的唯一标识符，以便Vue在更新DOM时能够正确地跟踪每个元素。

Vue3中的v-for指令还有一些新特性：

1. 支持使用`in`关键字替代`of`关键字。
2. 支持使用`v-for`指令遍历对象。
3. 支持使用新的`<template v-for>`语法来遍历多个元素。

例如，以下代码演示了Vue3中v-for指令的用法：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
    <div v-for="(value, key) in object" :key="key">
      {{ key }}: {{ value }}
    </div>
    <template v-for="(item, index) in items" :key="index">
      <h1>{{ item.title }}</h1>
      <p>{{ item.content }}</p>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Title 1', content: 'Content 1' },
        { title: 'Title 2', content: 'Content 2' },
        { title: 'Title 3', content: 'Content 3' }
      ],
      object: {
        prop1: 'Value 1',
        prop2: 'Value 2',
        prop3: 'Value 3'
      }
    };
  }
};
</script>

这个示例演示了如何使用v-for指令遍历数组、对象和多个元素。