基于Vue.js的二级选项卡（v-for的循环嵌套）（点击横向的选项tab，在纵向显示tab的子选项tabchild，在右边显示子选项卡对应的内容）javascript羊羊羊羊羊羊羊的博客-

效果：点击横向的选项tab，在纵向显示tab的子选项tabchild，在右边显示子选项卡对应的内容

准备HTML

 <style>         *{ padding: 0; margin: 0; } .box{ width: 100%; height: 100%; position: relative; } .tabul{ width: 100%; margin: 0 auto; overflow: auto; position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .tabul ul{ list-style: none; background-color: rgb(57, 57, 219); } .tabul ul li{ display: inline-block; padding: 0 20px; height: 65px; line-height: 65px; color: #ffffff; cursor: pointer; } .tabul ul li:hover{ background-color:darkblue; } .active{ background-color: darkblue; } .active1{ background-color: aquamarine; } .tabcont{ padding: 20px; position: absolute; left: 220px; top: 65px; right: 0; z-index: 100; } .tabcontent{ display: none; } .tableft{ width: 220px; position: fixed; bottom: 0; top: 65px; left: 0; background-color: darkcyan; z-index: 99; } .tableft ul{ list-style: none; overflow-y: auto; } .tableft ul li{ height: 60px; line-height: 60px; text-align: left; padding: 0 15px; color: #ffffff; } .tableft ul li span{ display: block; } .isShow{ display: block; } .hidden{ display: none; }     </style> 

<div id="demo"> <div class="box"> <!-- tab --> <div class="tabul"> <ul> <!--横向父级选项卡--> <li :class="currentId==index?'active':' '" v-for="(item, index) in lists" :key="index" @click='handle(index)'>{{item.tabname}}</li> </ul> </div> <div class="tableft"> <!--纵向子级选项卡--> <ul :class="currentId == index ?'isShow':'hidden'" v-for="(item, index) in lists" :key="index"> <li :class="currentID2 == index ?'active1':' '" v-for="(itemc, index) in item.tabchild" :key="itemc.id" @click='handleChild(index)'>                         {{itemc.tagname}}                           </li> </ul> </div> <!-- tabcont --> <!--子级内容--> <div class="tabcont" :class="currentID2 == index ? 'isShow':'hidden' " v-for="(item, index) in lists" :key="index"> <div class="tabcontent" :id="index" :class="currentID2 == index ?'isShow':''" v-for="(itemc, index) in item.tabchild" :key="itemc.id">                      {{itemc.tabcont}}                 </div> </div> </div> </div> 

 <script> const vm = new Vue({             el:'#demo',             data:{                 currentId:0,                 currentID2:0,                 lists:[ //准备的假数据 {                         id:1,                         tabname:'tab1',                         tabchild:[ {                                 id:1,                                 tagname:'tab1child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:2,                                 tagname:'tab1child2',                                 tabcont:'2loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:3,                                 tagname:'tab1child3',                                 tabcont:'3loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:4,                                 tagname:'tab1child4',                                 tabcont:'4loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:5,                                 tagname:'tab1child5',                                 tabcont:'5loremloremloremloremloremloremloremloremloremlorem' } ] }, {                         id:2,                         tabname:'tab2',                         tabchild:[ {                                 id:1,                                 tagname:'tab2child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:2,                                 tagname:'tab2child2',                                 tabcont:'2loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:3,                                 tagname:'tab2child3',                                 tabcont:'3loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:4,                                 tagname:'tab2child4',                                 tabcont:'4loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:5,                                 tagname:'tab2child5',                                 tabcont:'5loremloremloremloremloremloremloremloremloremlorem' } ] }, {                         id:3,                         tabname:'tab3',                         tabchild:[ {                                 id:1,                                 tagname:'tab3child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:2,                                 tagname:'tab3child2',                                 tabcont:'2loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:3,                                 tagname:'tab3child3',                                 tabcont:'3loremloremloremloremloremloremloremloremloremlorem' } ] }, {                         id:4,                         tabname:'tab4',                         tabchild:[ {                                 id:1,                                 tagname:'tab4child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:2,                                 tagname:'tab4child2',                                 tabcont:'2loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:3,                                 tagname:'tab4child3',                                 tabcont:'3loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:4,                                 tagname:'tab4child4',                                 tabcont:'4loremloremloremloremloremloremloremloremloremlorem' } ] }, {                         id:5,                         tabname:'tab5',                         tabchild:[ {                                 id:1,                                 tagname:'tab5child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:2,                                 tagname:'tab5child2',                                 tabcont:'2loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:3,                                 tagname:'tab5child3',                                 tabcont:'3loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:4,                                 tagname:'tab5child4',                                 tabcont:'4loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:5,                                 tagname:'tab5child5',                                 tabcont:'5loremloremloremloremloremloremloremloremloremlorem' } ] }, {                         id:6,                         tabname:'tab6',                         tabchild:[ {                                 id:1,                                 tagname:'tab6child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' } ] }, {                         id:7,                         tabname:'tab7',                         tabchild:[ {                                 id:1,                                 tagname:'tab7child1',                                 tabcont:'1loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:2,                                 tagname:'tab7child2',                                 tabcont:'2loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:3,                                 tagname:'tab7child3',                                 tabcont:'3loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:4,                                 tagname:'tab7child4',                                 tabcont:'4loremloremloremloremloremloremloremloremloremlorem' }, {                                 id:5,                                 tagname:'tab7child5',                                 tabcont:'5loremloremloremloremloremloremloremloremloremlorem' } ] } ] },             methods: {                 handle:function(index){ this.currentId = index                 },                 handleChild:function(index){ this.currentID2 = index                 } }, }) </script>