当前位置：首页 > VUE

vue 实现循环

2026-01-08 01:43:41VUE

Vue 实现循环的方法

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

基本数组循环

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

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

对象循环

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

<script>
export default {
  data() {
    return {
      object: {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    }
  }
}
</script>

数字范围循环

<template>
  <ul>
    <li v-for="n in 5" :key="n">
      {{ n }}
    </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', category: 'fruit' },
        { id: 2, name: 'Carrot', category: 'vegetable' },
        { id: 3, name: 'Orange', category: 'fruit' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.category === 'fruit')
    }
  }
}
</script>

嵌套循环

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

<script>
export default {
  data() {
    return {
      groups: [
        {
          id: 1,
          name: 'Fruits',
          items: [
            { id: 1, name: 'Apple' },
            { id: 2, name: 'Banana' }
          ]
        },
        {
          id: 2,
          name: 'Vegetables',
          items: [
            { id: 3, name: 'Carrot' },
            { id: 4, name: 'Broccoli' }
          ]
        }
      ]
    }
  }
}
</script>