vue3遍历数组套数组套对象

可以使用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>
登录后复制

相关问题

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>
登录后复制
以上是我对于你的问题的回答，希望能够帮到你。

vue3遍历数组对象

在 Vue3 中，遍历数组对象通常会涉及到 v-for指令，它允许你在模板中循环渲染数据。假设你有一个包含对象的数组 items，每个对象都有你想展示的一些属性：
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.value }}
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1', value: 'Value 1' },
{ id: 2, name: 'Item 2', value: 'Value 2' },
// 更多项...
]
};
}
};
</script>
登录后复制
在这个例子中，v-for遍历了items数组，:key用于确保元素的唯一性，item.name 和 item.value 分别用于显示对象的 name 和 value 属性。当你在Vue实例上更新 items 数组，列表会自动根据新的数据进行更新。