当前位置：首页 > VUE

vue中实现双重遍历

2026-02-20 16:57:06VUE

双重遍历的实现方法

在Vue中实现双重遍历通常指嵌套使用v-for指令来遍历多维数组或对象。以下是几种常见场景的实现方式：

遍历二维数组

<template>
  <div v-for="(row, rowIndex) in matrix" :key="rowIndex">
    <span v-for="(item, colIndex) in row" :key="colIndex">
      {{ item }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      matrix: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
      ]
    }
  }
}
</script>

遍历对象数组

<template>
  <div v-for="(user, userIndex) in users" :key="userIndex">
    <div v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

遍历对象属性

<template>
  <div v-for="(value, key) in object" :key="key">
    <div v-if="typeof value === 'object'">
      <div v-for="(subValue, subKey) in value" :key="subKey">
        {{ subKey }}: {{ subValue }}
      </div>
    </div>
    <div v-else>
      {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: 'Test',
        details: {
          color: 'red',
          size: 'large'
        }
      }
    }
  }
}
</script>

性能优化建议

为每个遍历项添加唯一的key属性，帮助Vue高效更新DOM
对于大型数据集考虑使用虚拟滚动技术
复杂的嵌套遍历可考虑拆分为子组件
避免在模板中进行复杂计算，必要时使用计算属性

组件化处理复杂遍历

<template>
  <div v-for="(item, index) in items" :key="index">
    <nested-item :data="item" />
  </div>
</template>

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

export default {
  components: { NestedItem },
  data() {
    return {
      items: [
        { values: [1, 2, 3] },
        { values: [4, 5, 6] }
      ]
    }
  }
}
</script>

NestedItem.vue组件：

vue中实现双重遍历

<template>
  <div v-for="(value, idx) in data.values" :key="idx">
    {{ value }}
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>