当前位置：首页 > VUE

vue实现双重循环

2026-03-10 09:18:12VUE

双重循环的实现方式

在Vue中实现双重循环通常用于渲染嵌套数据结构，例如二维数组或对象嵌套。以下是几种常见的方法：

使用v-for嵌套

通过两个v-for指令嵌套实现双重循环，外层循环遍历第一层数据，内层循环遍历第二层数据。

<template>
  <div v-for="(outerItem, outerIndex) in outerArray" :key="outerIndex">
    <div v-for="(innerItem, innerIndex) in outerItem.innerArray" :key="innerIndex">
      {{ innerItem }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerArray: [
        { innerArray: ['A1', 'A2'] },
        { innerArray: ['B1', 'B2'] }
      ]
    }
  }
}
</script>

使用计算属性处理嵌套数据

当数据结构复杂时，可以通过计算属性预处理数据，再在模板中使用单层循环。

<template>
  <div v-for="(item, index) in flattenedArray" :key="index">
    {{ item }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      nestedArray: [
        ['A1', 'A2'],
        ['B1', 'B2']
      ]
    }
  },
  computed: {
    flattenedArray() {
      return this.nestedArray.flat()
    }
  }
}
</script>

动态组件结合双重循环

当需要为嵌套数据的每个元素渲染不同组件时，可以结合动态组件实现。

<template>
  <div v-for="(outerItem, outerIndex) in outerData" :key="outerIndex">
    <component
      v-for="(innerItem, innerIndex) in outerItem.components"
      :key="innerIndex"
      :is="innerItem.type"
      v-bind="innerItem.props"
    />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      outerData: [
        {
          components: [
            { type: 'ComponentA', props: { text: 'A1' } },
            { type: 'ComponentA', props: { text: 'A2' } }
          ]
        },
        {
          components: [
            { type: 'ComponentB', props: { value: 1 } },
            { type: 'ComponentB', props: { value: 2 } }
          ]
        }
      ]
    }
  }
}
</script>