Vue3 循环语句

渲染"商品列表、用户列表、菜单项"这类重复结构时，逐条手写 HTML 是不现实的。Vue3 提供 v-for 指令，可以遍历数组、对象甚至整数范围，把一份数据批量渲染成多个元素。它是列表类页面的开发基础，几乎每天都会用到。

遍历数组

v-for 的基本写法是 item in list，写在哪一个元素上，那个元素就会随数组的每一项重复渲染一次。

<template>
  <ul>
    <li v-for="item in fruits">{{ item }}</li>
  </ul>
</template>

<script setup>
const fruits = ['苹果', '香蕉', '橙子']
</script>

效果：页面渲染出 3 个 <li>，依次显示苹果、香蕉、橙子。数组新增或删除元素时，列表会自动同步。

带索引遍历

如果想知道当前是第几项，可以再加一个参数拿到索引，索引从 0 开始。

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

<script setup>
const fruits = ['苹果', '香蕉', '橙子']
// 效果：0 - 苹果、1 - 香蕉、2 - 橙子
</script>

遍历对象时语法类似，三个参数依次是值、键名和索引，例如 v-for="(value, key, index) in user"。

遍历整数范围

v-for 还可以遍历一个正整数，得到从 1 到 n 的序列，常用于生成页码、星级评分等固定数量的元素。

<template>
  <span v-for="star in 5" :key="star">★</span>
</template>

效果：页面上连续渲染出 5 颗星。注意这里的 5 是字面量数字，不需要引号包裹。

为什么需要 key

在列表元素上尽量绑定唯一的 key，让 Vue 能够精确识别每个元素被新增、删除还是移动，从而高效复用 DOM 而不是整段重建。

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

<script setup>
const list = [
  { id: 1, name: 'Vue3 入门' },
  { id: 2, name: '组件进阶' },
]
</script>

key 应使用 id 这类稳定且唯一的字段。在列表中间插入或删除数据时，用 index 当 key 容易造成渲染错位，应当避免。

小结

v-for 用一个指令解决列表批量渲染：遍历数组用 item in list，需要序号加 index 参数，对象与整数范围同样支持；配合稳定的 key 能显著提升更新性能。结合上一节的条件语句，你已经可以用数据拼出各种动态界面，下一节进入组件开发。