vue实现循环

Vue 中实现循环的方法

在 Vue 中，通常使用 v-for 指令来实现循环渲染列表或对象数据。以下是几种常见的循环实现方式：

循环数组

通过 v-for 遍历数组，可以渲染列表项。语法为 (item, index) in items，其中 item 是当前项，index 是索引（可选）。

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

<script>
export default {
  data() {
    return {
      items: [
        { name: '苹果' },
        { name: '香蕉' },
        { name: '橙子' }
      ]
    };
  }
};
</script>

循环对象

v-for 也可以遍历对象的属性，语法为 (value, key, index) in object。

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 25,
        gender: '男'
      }
    };
  }
};
</script>

循环数字范围

可以直接循环一个数字范围，生成从 1 到指定数字的序列。

<template>
  <ul>
    <li v-for="n in 5" :key="n">
      当前数字: {{ n }}
    </li>
  </ul>
</template>

使用 key 的重要性

为每个循环项绑定唯一的 key 可以提高渲染性能，并帮助 Vue 正确追踪节点变化。通常使用唯一标识（如 id）而非索引。

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

循环嵌套

v-for 支持嵌套使用，可以处理多维数组或复杂数据结构。

<template>
  <div v-for="group in groups" :key="group.id">
    <h3>{{ group.name }}</h3>
    <ul>
      <li v-for="member in group.members" :key="member.id">
        {{ member.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        {
          id: 1,
          name: '团队A',
          members: [
            { id: 1, name: '成员1' },
            { id: 2, name: '成员2' }
          ]
        }
      ]
    };
  }
};
</script>

结合条件渲染

可以在循环中结合 v-if 实现条件过滤，但需要注意 v-for 和 v-if 的优先级问题（Vue 2 中 v-for 优先，Vue 3 中 v-if 优先）。

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

通过以上方法，可以灵活地在 Vue 中实现各种循环逻辑。