<template>
<div id="app">
<ul>
<li :class="{active:active == index}" v-for="(item,index) in tabs" @click="tabBtnClick(index)">
{{item}}
</li>
</ul>
<div class="tabCon">
<!-- <div class="conItem" v-for="(item,index) in tabCon" v-show="active==index">{{item}}</div>-->
<div class="conItem" v-show="active == 0"></div>
<div class="conItem" v-show="active == 1"></div>
<div class="conItem" v-show="active == 2"></div>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
tabBtn:["成交公告","新聞資訊","政策法規(guī)"],
//tabCon:["1","2","3"],
active:0
}
},
methods:{
tabBtnClick(index){
this.active = index;
}
}
}
</script>
<template>
<div id="app">
<ul>
<li :class="{active:active == index}" v-for="(item,index) in tabs" @click="toggle(index)">
{{item}}
</li>
</ul>
<!--:is實現(xiàn)多個組件實現(xiàn)同一個掛載點-->
<component :is="currentView"></component>
</div>
</template>
<script>
import tab1 from './components/tabs/tab1.vue'
import tab2 from './components/tabs/tab2.vue'
export default {
name: 'home',
data(){
return {
tabBtn:["成交公告","新聞資訊","政策法規(guī)"],
active:0,
tabConIsShow:0,
currentView:
}
},
methods:{
tabBtnClick(index){
this.active = index;
this.tabConIsShow = index;
}
},
components:{
tab1,
tab2
}
}
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
