当前位置：首页 > VUE

vue循环嵌套的实现

2026-01-20 11:54:38VUE

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>

<script>
export default {
  data() {
    return {
      outerArray: [
        { innerArray: ['A', 'B', 'C'] },
        { innerArray: ['D', 'E', 'F'] }
      ]
    }
  }
}
</script>

对象与数组混合嵌套

<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 v-else>
      {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nestedObject: {
        group1: ['a', 'b', 'c'],
        group2: ['d', 'e', 'f'],
        info: 'Additional data'
      }
    }
  }
}
</script>

多层嵌套结构

对于更复杂的嵌套结构，可以结合计算属性来简化模板：

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

<script>
export default {
  data() {
    return {
      categories: [
        {
          id: 1,
          name: 'Electronics',
          products: [
            {
              id: 101,
              name: 'Phone',
              variants: [
                { id: 1001, color: 'Black', size: '64GB' },
                { id: 1002, color: 'White', size: '128GB' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

动态嵌套渲染

当数据结构来自 API 响应时，可以结合异步加载实现动态嵌套：

vue循环嵌套的实现

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
    <div v-for="post in posts" :key="post.id">
      <h3>{{ post.title }}</h3>
      <div v-for="comment in post.comments" :key="comment.id">
        <p>{{ comment.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      posts: []
    }
  },
  async created() {
    const response = await fetch('/api/posts-with-comments')
    this.posts = await response.json()
    this.loading = false
  }
}
</script>