当前位置：首页 > VUE

vue循环嵌套的实现

2026-02-21 03:55:29VUE

Vue循环嵌套的实现方法

在Vue中实现循环嵌套可以通过v-for指令的嵌套使用来完成。以下是几种常见场景的实现方式：

基础数组嵌套循环

<template>
  <div v-for="(item, index) in outerArray" :key="index">
    <div v-for="(subItem, subIndex) in item.innerArray" :key="subIndex">
      {{ subItem }}
    </div>
  </div>
</template>

对象与数组混合嵌套

<template>
  <div v-for="(value, key) in nestedObject" :key="key">
    <div v-if="Array.isArray(value)">
      <span v-for="(item, index) in value" :key="index">
        {{ item }}
      </span>
    </div>
  </div>
</template>

多层嵌套数据结构

vue循环嵌套的实现

data() {
  return {
    categories: [
      {
        name: 'Category 1',
        products: [
          { id: 1, name: 'Product A' },
          { id: 2, name: 'Product B' }
        ]
      }
    ]
  }
}

<template>
  <div v-for="category in categories" :key="category.name">
    <h3>{{ category.name }}</h3>
    <ul>
      <li v-for="product in category.products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

注意事项

每个v-for循环必须设置唯一的:key属性，通常使用ID或索引
嵌套层级不宜过深，超过三层建议考虑重构数据结构
可以使用计算属性预处理复杂嵌套数据，简化模板逻辑
对于性能敏感的场景，考虑使用虚拟滚动等技术优化渲染

动态嵌套循环示例

data() {
  return {
    dynamicLevels: [
      {
        items: [
          { subItems: ['A', 'B'] },
          { subItems: ['C', 'D'] }
        ]
      }
    ]
  }
}

<template>
  <div v-for="(level, i) in dynamicLevels" :key="i">
    <div v-for="(item, j) in level.items" :key="j">
      <span v-for="(subItem, k) in item.subItems" :key="k">
        {{ subItem }}
      </span>
    </div>
  </div>
</template>