Vue 实现双层Tab切换(最大的坑就是img动态设置src引入问题)本地图片要放static文件夹下

<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.namethis.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>