vue 实现循环

循环渲染列表

在Vue中，使用v-for指令实现循环渲染列表。基本语法为v-for="(item, index) in items"，其中items是数据源数组，item是当前遍历的元素，index是可选索引。

<template>
  <ul>
    <li v-for="(fruit, index) in fruits" :key="index">
      {{ index }}: {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

循环渲染对象

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

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

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
        gender: 'male'
      }
    }
  }
}
</script>

使用key属性

为每个循环项添加唯一的key属性，帮助Vue高效更新DOM。通常使用数据中的唯一标识符而非索引。

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

循环范围数字

v-for可以循环一个整数范围，语法为v-for="n in 10"，从1循环到10。

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

条件循环

结合v-if和v-for时，注意v-for优先级更高。推荐使用计算属性过滤数据而非混合指令。

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

<script>
export default {
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>