vue简单的二维数组循环嵌套

最新推荐文章于 2024-02-03 18:23:28 发布

贝壳贝

最新推荐文章于 2024-02-03 18:23:28 发布

阅读量1.1k

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_46056625/article/details/114240470

版权

<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（）创建一个简单的二维数组
//一维数组 名字：[] 二维数组  名字：[ { 名字：[] } ] 数组简单构成
  data() {
    return {
        // sku二维数据
        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 },
            ]
          }
        ],
         

    };
  },

//完成两层循环的布局
  <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>

//这是循环取出第一层数组，保存在item里面
 <div v-for="(item,index) in skuData " :key="index" class="box"></div>
 //这是循环出第二层数组，注意要在item里面取出
 <div v-for="(item_,index_) in item.skuChild" :key ="index_" class="color"></div>
 //两者循环嵌套就完成了