v-for怎么实现三层循环

`v-for` 是 Vue.js 中的一个指令，用于遍历数组或对象并渲染元素。如果你想通过 `v-for` 实现三层嵌套循环，可以按照这样的结构：

<template>
  <div id="my-component">
    <ul>
      <!-- 第一层循环 -->
      <li v-for="(item1, index1) in outerArray" :key="index1">
        <!-- 内部包含一个 div 作为容器 -->
        <div>
          <!-- 第二层循环 -->
          <ul>
            <li v-for="(item2, index2) in item1.array2" :key="index2">
              <!-- 又包含一个 ul 作为第三层循环 -->
              <ul>
                <li v-for="(item3, index3) in item2.array3" :key="index3">{{ item3 }}</li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerArray: [
        { array2: [/* ... */] },
        { array2: [/* ... */] }, // 更多项...
      ]
    };
  }
};
</script>

在这个例子中，`outerArray` 是最外层的数组，内部每个对象又有 `array2` 属性，`array2` 同样是一个数组，里面包含了 `array3`。`v-for` 会依次遍历这三个层级的数据。