vue中多重循环怎么写
时间: 2024-04-11 13:33:20 浏览: 1
在Vue中,可以使用嵌套的`v-for`指令来实现多重循环。下面是一个示例:
```html
<template>
<div>
<div v-for="item in items" :key="item.id">
<div v-for="subItem in item.subItems" :key="subItem.id">
<!-- 在这里放置你的代码 -->
{{ subItem.name }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
subItems: [
{ id: 1, name: 'Sub Item 1' },
{ id: 2, name: 'Sub Item 2' },
{ id: 3, name: 'Sub Item 3' }
]
},
{
id: 2,
subItems: [
{ id: 4, name: 'Sub Item 4' },
{ id: 5, name: 'Sub Item 5' },
{ id: 6, name: 'Sub Item 6' }
]
}
]
};
}
};
</script>
```
在上面的示例中,我们使用了两个嵌套的`v-for`指令。外层循环遍历`items`数组,内层循环遍历每个`item`对象中的`subItems`数组。你可以根据自己的需求修改数据和模板来适应多重循环的情况。