vue3遍历数组套数组套对象
时间: 2023-04-03 12:01:53 浏览: 142
可以使用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>
```
以上是我对于你的问题的回答,希望能够帮到你。
vue循环遍历数组对象
在 Vue 中,可以使用 `v-for` 指令来循环遍历数组或对象,示例如下:
循环遍历数组:
```html
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
```
其中,`items` 是一个数组,`item` 是数组中的每个元素。
循环遍历对象:
```html
<ul>
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
```
其中,`object` 是一个对象,`key` 是对象中的键,`value` 是对象中的值。
另外,如果要同时获取索引,可以使用以下语法:
```html
<ul>
<li v-for="(item, index) in items">{{ index }}. {{ item }}</li>
</ul>
```
其中,`index` 是元素在数组中的索引。
阅读全文