<template>
<div id="app">
<div class="main">
<h1>Vue实现双层Tab切换</h1>
<div class="main_header">
<button :class="{btn:true, slect_btn:select==obj.name}" v-for="(obj) in datascore" @click="change(obj)">{{obj.name}}</button>
</div>
<div class="main_content">
<div class="one" v-for="(obj,index) in datascore" v-if="obj.name==select">
<button :class="{btn:true,slect_btn:children_select==obj1.c_name}" v-for="(obj1) in obj.content" @click="children_change(obj1.c_name)">{{obj1.c_name}}</button>
<div class="one_content" v-if="children_select==obj1.c_name" v-for="(obj1) in obj.content" >
<div class="one_content_one" v-for="(obj2) in obj1.children">
<img style="width:164px;height: 190px;" :src="obj2.img" /><br/>
{{obj2.d_name}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import daiyue_1 from "@/../static/img/daiyue.jpg";
import daiyue_2 from "@/../static/img/daiyue2.jpg";
import daiyue_3 from "@/../static/img/daiyue3.jpg";
import daiyue_4 from "@/../static/img/daiyue4.jpg";
import daiyue_5 from "@/../static/img/daiyue5.jpg";
import liuneng1 from "@/../static/img/liuneng.jpg";
import liuneng2 from "@/../static/img/liuneng2.jpg";
import liuneng3 from "@/../static/img/liuneng3.jpg";
import angle1 from "@/../static/img/angle1.jpg";
import angle2 from "@/../static/img/angle2.jpg";
import angle3 from "@/../static/img/angle3.jpg";
import chiji1 from "@/../static/img/chiji1.jpg";
import chiji2 from "@/../static/img/chiji2.jpg";
import chiji3 from "@/../static/img/chiji3.jpg";
import jiashiqi1 from "@/../static/img/jiashiqi1.jpg";
import jiashiqi2 from "@/../static/img/jiashiqi2.jpg";
export default {
name: 'app',
data () {
return {
datascore:[
{
name:"明星",
content:[
{
c_name:"戴玥",
children:[
{d_name:"戴玥",img:daiyue_1},
{d_name:"戴玥",img:daiyue_2},
{d_name:"戴玥",img:daiyue_3},
{d_name:"戴玥",img:daiyue_4},
]
},
{
c_name:"刘能",children:[
{d_name:"刘能",img:liuneng1},
{d_name:"刘能",img:liuneng2},
{d_name:"刘能",img:liuneng3},
]
},
{
c_name:"angleBaby",children:[
{d_name:"angleBaby",img:angle1},
{d_name:"angleBaby",img:angle2},
{d_name:"angleBaby",img:angle3},
]
}
],
},
{
name:"游戏",
content:[
{
c_name:"吃鸡",children:[
{d_name:"吃鸡",img:chiji1},
{d_name:"吃鸡",img:chiji2},
{d_name:"吃鸡",img:chiji3},
]},
{
c_name:"加湿器",children:[
{d_name:"加湿器",img:jiashiqi1},
{d_name:"加湿器",img:jiashiqi2},
]},
],
}
],
select:'明星',
children_select:"戴玥",
};
},
components: {
},
methods: {
change(obj){
this.select=obj.name
this.children_select=obj.content[0].c_name;
},
children_change(flag){
this.children_select=flag;
},
},
}
</script>
<style>
.one_content{
width: 100%;
height: 530px;
background-color: white;
}
.main_content{
width: 100%;
height: 565px;
background-color: aqua;
}
.slect_btn{
background-color:white !important;
}
.main_header{
background-color: #CCC;
}
.one,{
width:800px;
height:565px;
}
span{
display: inline-block;
width: 100px;
height: 60px;
}
.btn{
text-overflow: ellipsis;overflow: hidden;white-space: nowrap;background-color:rgb(204, 204, 204);border-color: rgba(0, 0, 0, 0.3);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);color: #000;border: 1px solid #CCC;border-radius: 5px;padding: 6px;width: 80px;text-align: center;cursor: pointer;}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.main{
width: 800px;
height: 600px;
margin: 0px auto;
border:1px solid rgb(204, 204, 204);
}
.one_content_one{
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
}
</style>