当前位置：首页 > VUE

vue实现双重循环

2026-01-18 03:34:03VUE

实现双重循环的常见场景

在Vue中实现双重循环通常用于渲染嵌套数据结构，例如表格、树形结构或多级菜单。以下是几种典型实现方式。

使用v-for嵌套

通过嵌套v-for指令可以轻松实现双重循环。外层循环遍历第一层数组，内层循环遍历子数组。

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

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

表格渲染示例

双重循环特别适合渲染二维表格数据，外层循环处理行，内层循环处理列。

<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td v-for="(cell, colIndex) in row" :key="colIndex">
        {{ cell }}
      </td>
    </tr>
  </table>
</template>

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

动态组件结合循环

当需要根据嵌套数据动态渲染不同组件时，可以结合<component>实现。

<template>
  <div v-for="section in sections" :key="section.id">
    <component 
      v-for="item in section.items"
      :is="item.componentType"
      :key="item.id"
      v-bind="item.props"
    />
  </div>
</template>

性能优化建议

嵌套循环可能导致性能问题，以下方法可以优化：

为所有循环项添加唯一的:key
对大数据集使用虚拟滚动
必要时使用计算属性预处理数据
避免在循环内进行复杂计算

<template>
  <div v-for="group in processedData" :key="group.id">
    <item-component 
      v-for="item in group.items"
      :key="item.id"
      :data="item"
    />
  </div>
</template>

<script>
export default {
  computed: {
    processedData() {
      return this.rawData.map(group => ({
        ...group,
        items: group.items.filter(item => item.active)
      }))
    }
  }
}
</script>

处理复杂数据结构

对于深层嵌套结构，可以考虑递归组件实现无限层级渲染。

<template>
  <tree-node :node="treeData" />
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { 
            name: 'Child',
            children: [...] 
          }
        ]
      }
    }
  }
}
</script>

递归组件示例(TreeNode.vue):

vue实现双重循环

<template>
  <div>
    {{ node.name }}
    <tree-node 
      v-for="child in node.children"
      :node="child"
      :key="child.id"
    />
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node']
}
</script>

标签: vue