vue簡單的二維數(shù)組循環(huán)嵌套方式

更新時間：2022年04月24日 14:24:16 作者：貝殼貝

這篇文章主要介紹了vue簡單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

二維數(shù)組循環(huán)嵌套方式

<div class="box">
? <div class="color">
? ? ?<div>藍色/尺碼</div>
? </div>
? //這是簡單的布局

.box{
? ? border: 1px solid red;
? ? display: flex;
??
}
.color{
? ? display: flex;
}
.color div{
? ? width: 100px;
? ? height: 50px;
? ? text-align: center;
? ? line-height: 50px;
? ? border: 1px solid blue;
}
//樣式代碼

//在data（）創(chuàng)建一個簡單的二維數(shù)組
//一維數(shù)組 名字：[] 二維數(shù)組 ?名字：[ { 名字：[] } ] 數(shù)組簡單構成
? data() {
? ? return {
? ? ? ? // sku二維數(shù)據(jù)
? ? ? ? skuData: [
? ? ? ? ? {
? ? ? ? ? ? skuTitle: '顏色',
? ? ? ? ? ? skuChild: [
? ? ? ? ? ? ? { skuTitle: '紅色', sku: 100, skuId: 1 },
? ? ? ? ? ? ? { skuTitle: '藍色', sku: 100, skuId: 2 },
? ? ? ? ? ? ]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? skuTitle: '尺碼',
? ? ? ? ? ? skuChild: [
? ? ? ? ? ? ? { skuTitle: 'S', sku: 100, skuId: 3 },
? ? ? ? ? ? ? { skuTitle: 'M', sku: 100, skuId: 4 },
? ? ? ? ? ? ? { skuTitle: 'L', sku: 100, skuId: 5 },
? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ? ],
? ? ? ? ?
? ? };
? },

//完成兩層循環(huán)的布局
? <div v-for="(item,index) in skuData " :key="index" class="box">
? ? <div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color">
? ? ? <div>{{item_.skuTitle}}</div>
? ? </div>
? </div>

//這是循環(huán)取出第一層數(shù)組，保存在item里面
?<div v-for="(item,index) in skuData " :key="index" class="box"></div>
?//這是循環(huán)出第二層數(shù)組，注意要在item里面取出
?<div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color"></div>
?//兩者循環(huán)嵌套就完成了