vue实现双重循环
Vue 实现双重循环的方法
在 Vue 中实现双重循环可以通过 v-for 指令嵌套完成，适用于渲染多维数组或对象结构。
嵌套数组的双重循环
假设有一个二维数组，可以通过两层 v-for 遍历：
<template>
<div v-for="(row, rowIndex) in matrix" :key="rowIndex">
<span v-for="(item, colIndex) in row" :key="colIndex">
{{ item }}
</span>
</div>
</template>
<script>
export default {
data() {
return {
matrix: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
};
}
};
</script>对象与数组混合的双重循环
若数据结构为对象包含数组，可先遍历对象再遍历内部数组：
<template>
<div v-for="(items, category) in data" :key="category">
<h3>{{ category }}</h3>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: {
fruits: ['Apple', 'Banana'],
vegetables: ['Carrot', 'Broccoli']
}
};
}
};
</script>双重循环的 Key 注意事项
- 外层循环建议使用唯一标识（如
id或自定义字段），避免直接使用index。 - 若数据可能动态变化，应确保
key的稳定性。
性能优化建议
- 嵌套循环可能导致渲染性能下降，对于大数据量建议使用虚拟滚动（如
vue-virtual-scroller）。 - 复杂场景可考虑将内层循环提取为子组件，利用 Vue 的组件级更新机制。
