vue3【列表渲染】v-for 详细介绍（vue中的“循环”）

在Vue 3中，v-for 是一个常用的指令，用于基于数据重复渲染元素。v-for 指令需要一个特定的语法格式，即 item in items，其中 items 是源数据数组，而 item 是数组中每个元素的别名。

下面是一个使用 v-for 进行列表渲染的简单例子：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const items = ref(['苹果', '香蕉', '橙子']);
 
    return {
      items
    };
  }
};
</script>

在这个例子中，items 是一个响应式的数组，包含了我们想要渲染的列表项。v-for 指令用于遍历 items 数组，并为数组中的每个元素创建一个 <li> 元素。:key 是给每个循环的子元素一个唯一的 key，这是 Vue 用于追踪每个节点的身份，从而进行高效的更新操作。

注意，在使用 v-for 时，建议始终提供 :key 属性，这对于 Vue 来维护渲染列表的内部状态是非常重要的。如果你有一个稳定的唯一 id 可以用作 key，那么使用这个 id；如果没有，那么使用 index（通常不推荐这样做，因为如果列表顺序发生变化，那么使用 index 作为 key 可能会导致性能问题）。