vue3用map遍历数组套数组套对象

可以使用嵌套的 v-for 循环来遍历数组套数组套对象，示例代码如下：

<template>
  <div>
    <div v-for="(arr, index) in array" :key="index">
      <div v-for="(obj, key) in arr" :key="key">
        <p>{{ obj.name }}</p>
        <p>{{ obj.age }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        [
          { name: '张三', age: 18 },
          { name: '李四', age: 20 }
        ],
        [
          { name: '王五', age: 22 },
          { name: '赵六', age: 24 }
        ]
      ]
    }
  }
}
</script>

以上是我对于你的问题的回答，希望能够帮到你。

相关问题

vue3for循环遍历数组

在 Vue 3 中，使用 `v-for` 指令进行循环遍历数组的方式与 Vue 2 中有所不同，具体如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  }
}
</script>

在上面的代码中，我们使用 `v-for` 指令遍历了一个数组 `items`，并将数组中的每个元素渲染为一个列表项。`v-for` 指令中的 `(item, index)` 表示循环遍历数组 `items`，并将每个元素赋值给变量 `item`，同时将当前元素的索引赋值给变量 `index`。在每个列表项中，我们使用 `{{ item }}` 显示当前元素的值，通过 `:key="index"` 指定每个列表项的唯一标识符，以提高性能。

需要注意的是，在 Vue 3 中，我们可以使用 `v-for` 指令直接遍历对象，这与 Vue 2 中的做法不同。如果需要遍历对象，可以使用以下语法：

<template>
  <div>
    <ul>
      <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'Tom',
        age: 18,
        gender: 'male'
      }
    }
  }
}
</script>

在上面的代码中，我们使用 `v-for` 指令遍历了一个对象 `obj`，并将对象中的每个键值对渲染为一个列表项。`v-for` 指令中的 `(value, key)` 表示循环遍历对象 `obj`，并将每个键值对的值赋值给变量 `value`，同时将当前键值对的键赋值给变量 `key`。在每个列表项中，我们使用 `{{ key }}: {{ value }}` 显示当前键值对的键和值，通过 `:key="key"` 指定每个列表项的唯一标识符，以提高性能。

写一个vue3中的遍历数组

在Vue3中，可以使用`v-for`指令来遍历数组。下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      items: ['apple', 'banana', 'orange']
    })

    return { state }
  }
}
</script>

在上面的示例中，我们使用了Vue3的`reactive`函数来创建一个响应式状态`state`，其中包含一个数组`items`。然后，在模板中使用`v-for`指令来遍历`items`数组中的每个元素，并使用`:key`指定每个元素的唯一标识。在每个元素中，我们使用双括号语法`{{ item }}`来显示当前元素的值。