v-for怎么实现嵌套循环外层一次内层一次

`v-for` 是 Vue.js 中的一个指令，用于基于数组或对象的数据源进行迭代渲染。如果你想要实现嵌套循环，也就是外层循环控制元素的数量，并且每个元素内部有一个内层循环，你可以这样做：

<template>
  <div id="nested-loop">
    <!-- 外层循环 -->
    <ul v-for="(item, index) in outerArray" :key="index">
      <li>{{ item.name }} - 内部循环</li>
      <!-- 内层循环 -->
      <ul>
        <li v-for="(innerItem, innerIndex) in item.innerArray" :key="innerIndex">
          {{ innerItem.value }}
        </li>
      </ul>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      outerArray: [
        { name: 'A', innerArray: ['a1', 'a2', 'a3'] },
        { name: 'B', innerArray: ['b1', 'b2'] },
        // 更多项...
      ],
    };
  },
};
</script>

在这个例子中，`outerArray` 是外部数据源，它是一个包含对象的数组，每个对象又有 `innerArray` 属性。`v-for` 遍历这个外部数组，对于每一个 `item`，会渲染一个列表项并展示其名字，然后在列表项内部再遍历 `innerArray` 来显示内部的值。