vue3 v-for咋用

在Vue 3中，`v-for`指令是用于循环渲染数组或对象的关键。它的基本语法结构如下：

<template>
  <div>
    <!-- 每个迭代的元素将会替换这里的每一行 -->
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

这里解释一下各个部分：

- `<li>`标签是模板中要循环渲染的基本元素。
- `v-for="(item, index) in items"`：这是`v-for`指令的主要部分。`item`代表当前迭代的数组项，`index`则表示每个元素的索引。
- `:key="index"`：这是一个必需的属性，用于Vue跟踪每个节点的身份，防止不必要的DOM操作。如果数组的顺序改变，你应该基于稳定的唯一标识提供一个`key`。

当你运行这段代码，`items`数组中的每个元素都会变成一个新的`<li>`元素插入到页面上。