vue中如何实现循环

在 Vue 中实现循环

Vue 提供了 v-for 指令用于实现循环渲染列表数据。v-for 可以遍历数组、对象或数字范围，生成动态的 DOM 元素。

遍历数组

使用 v-for 遍历数组时，语法为 item in items 或 (item, index) in items，其中 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: 'Apple' },
        { name: 'Banana' },
        { name: 'Orange' }
      ]
    }
  }
}
</script>

遍历对象

v-for 也可以遍历对象的属性，语法为 (value, key, index) in object，其中 value 是属性值，key 是属性名，index 是索引。

<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: 'John',
        age: 30,
        gender: 'male'
      }
    }
  }
}
</script>

遍历数字范围

v-for 可以遍历一个数字范围，语法为 n in 10，生成从 1 到 10 的序列。

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

使用 key 的重要性

为每个循环项绑定唯一的 key 是必要的，它帮助 Vue 高效地更新 DOM。通常使用唯一标识符（如 id）而非索引作为 key，以避免渲染问题。

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

结合计算属性或方法

在复杂场景中，可以结合计算属性或方法处理数据后再循环。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', active: true },
        { id: 2, name: 'Banana', active: false },
        { id: 3, name: 'Orange', active: true }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>

通过 v-for 指令，Vue 可以灵活地处理各种循环需求，结合响应式数据实现动态渲染。