需實現功能：

1.多層迴圈

2.每層迴圈包含（或不包含）tab 切換

3.tab切換，每層迴圈是獨立的。

 如圖所示：

html部分

<div class="box" v-for="(items,index) in list" :key="index">
                    <div class="box-top">
                        <div class="box-left">
                            <img :src="items.img"/>
                            <span>{{items.title}}</span>
                        </div>
                        <div class="more" ref="more" @click="loadMore(index)">檢視更多</div>
                    </div>
                    
                    <div v-if
 
="items.tab && items.tab.length>0" >
                        <div class="tab">{{items.current}}
                            <div class="tab-ceil"  ref="tabs" v-for="(item,menu_index) in items.tab" :key="menu_index" :class="items.current == menu_index?'active':''" @click="tabFun(index,menu_index)">
                                <img v-if
 
="items.current == menu_index" :src="item.actImg"/>
                                <img v-else :src="item.img"/>
                                <span>{{item.text}}</span>
                            </div>
                        </div>
                        <div class="list" ref="list">
                            <div class="list-ceil" v-for
 
="(ite,ind) in items.imgs[items.current].info" :key="ind">
                                <img :src="ite"/>
                            </div>
                        </div>
                    </div>
                    <div class="list" v-else ref="list" >
                        <div class="list-ceil" v-for="(item,img_index) in items.imgs" :key="img_index">
                            <img :src="item"/>
                        </div>
                    </div>
                </div>
                

js部分中的data

list:[
                    {
                        title:'境內用卡優惠集錦',
                        img:'img/icon_food.png',
                        current:0, //單個迴圈中，tab的選中值
                        tab:[ //每個tab對應img下面的info
                            {img:"img/icon_s_1.png",actImg:'img/icon_s_1_act.png',text:'出行類'},
                            {img:"img/icon_s_2.png",actImg:'img/icon_s_2_act.png',text:'餐飲類'},
                            {img:"img/icon_s_3.png",actImg:'img/icon_s_3_act.png',text:'商超類'},
                            {img:"img/icon_s_4.png",actImg:'img/icon_s_4_act.png',text:'新客類'},
                        ],
                        imgs:[
                            {info:['img/card1.jpg','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/card1.jpg','img/img1.png','img/img1.png','img/img1.png']},
                        ]
                    },
                    {
                        title:'跨境用卡優惠集錦',
                        img:'img/icon_star.png',
                        current:0,
                        tab:[
                            {img:"img/icon_s_1.png",actImg:'img/icon_s_1_act.png',text:'出行類'},
                            {img:"img/icon_s_2.png",actImg:'img/icon_s_2_act.png',text:'餐飲類'},
                            {img:"img/icon_s_3.png",actImg:'img/icon_s_3_act.png',text:'商超類'},
                            {img:"img/icon_s_4.png",actImg:'img/icon_s_4_act.png',text:'新客類'},
                        ],
                        imgs:[
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                            {info:['img/img1.png','img/img1.png','img/img1.png','img/img1.png']},
                        ]
                    },
                    {
                        title:'其他活動',
                        img:'img/icon_gift.png',
                        imgs:['img/img1.png','img/img1.png','img/img1.png','img/img1.png','img/img1.png','img/img1.png']
                    },
                    {
                        title:'熱卡推薦',
                        img:'img/icon_card.png',
                        imgs:['img/card1.jpg','img/card2.jpg']
                    },
                ],

js中的切換方法（根據index改變list中item對應的current值）

tabFun(index,menu_index){
                    this.$nextTick(function(){
                        this.list.map((item,i)=>{
                            if(i ==index){
                                item.current = menu_index
                            }
                        })
                    });
                }