Vue 常用指令 v-for 标签循环展示数据

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

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

1. 基本语法

v-for="(item, index) in list" :key="index"php42 Bytes© 菜鸟-创作你的创作

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>php400 Bytes© 菜鸟-创作你的创作

输出：

1 - 小明 (20 岁)2 - 小红 (22 岁)3 - 小刚 (25 岁)php41 Bytes© 菜鸟-创作你的创作

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>php226 Bytes© 菜鸟-创作你的创作

4. 遍历数字

<div v-for="n in 5" :key="n">  第 {{ n }} 次循环</div>php52 Bytes© 菜鸟-创作你的创作

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>php409 Bytes© 菜鸟-创作你的创作