v-for列表渲染

v-for 指令用于基于数据源渲染列表。

遍历数组

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

获取索引

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

遍历对象

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

数字范围

<span v-for="n in 10">{{ n }}</span>

渲染 1 到 10 的数字。

key 的作用

<li v-for="item in items" :key="item.id">

key 是 Vue 识别节点的唯一标识，帮助 Diff 算法高效更新：

• 必须唯一且稳定
• 避免使用 index 作为 key（列表顺序可能改变）
• 推荐使用数据 ID

使用 v-for 时始终提供 :key 属性，除非遍历内容无状态。

在 template 上使用

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

要点总结

• v-for 支持数组、对象、数字范围遍历
• 始终提供 :key 属性，使用稳定唯一的值
• 可获取索引、键名等额外参数
• 可在 <template> 上使用以渲染多个元素