vue 实现循环

循环渲染列表数据

在 Vue 中，可以通过 v-for 指令实现循环渲染。v-for 可以遍历数组或对象，并为每个元素生成对应的 DOM 节点。

基本语法：

<template>
  <div>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>

    <!-- 遍历对象 -->
    <ul>
      <li v-for="(value, key) in object" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange'],
      object: {
        name: 'Vue',
        version: '3.x'
      }
    };
  }
};
</script>

使用 key 提升性能

v-for 必须绑定 :key，以便 Vue 高效更新 DOM。推荐使用唯一标识（如 id），避免直接使用 index（除非列表静态）。

<template>
  <div v-for="user in users" :key="user.id">
    {{ user.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    };
  }
};
</script>

循环渲染组件

v-for 也可用于循环渲染子组件，需通过 props 传递数据。

<template>
  <div>
    <user-item 
      v-for="user in users" 
      :key="user.id" 
      :user="user" 
    />
  </div>
</template>

<script>
import UserItem from './UserItem.vue';

export default {
  components: { UserItem },
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    };
  }
};
</script>

条件与循环结合

使用 v-if 和 v-for 时，注意优先级：v-for 高于 v-if。推荐通过计算属性过滤数据，而非直接混合使用。

<template>
  <div>
    <div v-for="num in evenNumbers" :key="num">
      {{ num }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    evenNumbers() {
      return this.numbers.filter(num => num % 2 === 0);
    }
  }
};
</script>

遍历数字范围

v-for 可遍历数字范围，生成固定次数的循环。

<template>
  <div>
    <span v-for="n in 5" :key="n">
      {{ n }}
    </span>
  </div>
</template>