在 Vue 中，v-for 是最常用的指令之一，用于在模板中循环渲染列表数据。它可以遍历 数组、对象、字符串，甚至是 数字。

下面我给你整理一个完整的“v-for 标签循环展示数据”的知识笔记 + 示例代码。

1. 基本语法

v-for="(item, index) in list" :key="index"
  • item → 当前循环项
  • index → 当前项的索引
  • :key → 唯一标识，强烈建议加上，以优化渲染性能

2. 基础示例（数组循环）

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        {{ index + 1 }} - {{ user.name }} ({{ user.age }} 岁)
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: "小明", age: 20 },
        { name: "小红", age: 22 },
        { name: "小刚", age: 25 }
      ]
    };
  }
};
</script>

输出：

1 - 小明 (20 岁)
2 - 小红 (22 岁)
3 - 小刚 (25 岁)

3. 遍历对象

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

<script>
export default {
  data() {
    return {
      person: { name: "小李", age: 30, city: "北京" }
    };
  }
};
</script>

4. 遍历数字

<div v-for="n in 5" :key="n">
  第 {{ n }} 次循环
</div>

5. 嵌套循环

<div v-for="(category, cIndex) in categories" :key="cIndex">
  <h3>{{ category.name }}</h3>
  <ul>
    <li v-for="(item, iIndex) in category.items" :key="iIndex">
      {{ item }}
    </li>
  </ul>
</div>

<script>
export default {
  data() {
    return {
      categories: [
        { name: "水果", items: ["苹果", "香蕉", "橙子"] },
        { name: "蔬菜", items: ["西红柿", "黄瓜", "土豆"] }
      ]
    };
  }
};
</script>

6. 注意事项

  1. 必须加 :key
    • 保证每个节点的唯一性
    • 推荐用数据的唯一 id，而不是索引
  2. v-for 和 v-if 不建议一起用
    • 如果要同时判断，可以用 计算属性 或 外层 <template> 包裹
  3. 可用 <template> 避免额外标签 <template v-for="item in list" :key="item.id"> <p>{{ item.name }}</p> <p>{{ item.age }}</p> </template>