tab vue 竖排_tab切换（vue）

• {{item}}

import tab1 from '@/components/common/tab1.vue'

import tab2 from '@/components/common/tab2.vue'

import tab3 from '@/components/common/tab3.vue'

export default {

components: {

tab1,tab2,tab3

},

data(){

return{

tabList:['tab1','tab2','tab3'],

nowIndex:0,

isShow:false

}

},

methods:{

toggleTab(index){

this.nowIndex = index

}

}

}

.all{

width: 600px;

margin: auto;

}

ul{

height: 60px;

width: 100%;

padding: 0;

margin: 0;

list-style: none;

border:1px solid #ccc;

border-bottom:none;

}

li{

width: 33.1%;

height: 60px;

float: left;

border-right: 1px solid #ccc;

}

.content{

width: 600px;

height:300px;

}

.con{

width: 600px;

height:300px;

border: 1px solid #ccc;

}