Vue 實現雙層Tab切換(最大的坑就是img動態設定src引入問題)本地圖片要放static資料夾下
阿新 • • 發佈:2018-12-29
<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>