vue3嵌套v-for

在 Vue 3 中，你可以像在 Vue 2 中一样使用 `v-for` 来对数组进行循环，并且也可以嵌套 `v-for` 来对多维数组进行循环。

下面是一个简单的示例，展示了如何在 Vue 3 中嵌套 `v-for`：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <h2>{{ item.title }}</h2>
      <ul>
        <li v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
          {{ subItem }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: 'Item 1',
          subItems: ['Subitem 1', 'Subitem 2', 'Subitem 3']
        },
        {
          title: 'Item 2',
          subItems: ['Subitem 4', 'Subitem 5', 'Subitem 6']
        },
        {
          title: 'Item 3',
          subItems: ['Subitem 7', 'Subitem 8', 'Subitem 9']
        }
      ]
    };
  }
};
</script>

在上面的示例中，我们有一个名为 `items` 的数组，其中每个元素都包含一个名为 `subItems` 的子数组。我们使用 `v-for` 对 `items` 进行循环，并使用嵌套的 `v-for` 对 `subItems` 进行循环。

请注意，我们使用 `:key` 属性来为每个循环生成的元素提供唯一的标识符。这对于 Vue 3 的性能至关重要。