tab vue 竖排_vue实现tab切换

需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感

Tabs

.active{

background: #eee;

}

.tabs{

width: 200px;

height: 20px;

font:0;

padding:0;

}

.li-tab{

width: 50%;

height: 100%;

display:inline-block;

text-align: center;

}

.divTab{

width: 200px;height: 300px;

}

• @click="toggleTabs(index)"

  :class="{active:index!=nowIndex}">{{item}}

我是tab1

我是tab2

var app=new Vue({

el:'#app',

data:{

tabsParam:['tab1','tab2'],//(这个也可以用对象key，value来实现)

nowIndex:0,//默认第一个tab为激活状态

},

methods:{

toggleTabs:function(index){

this.nowIndex=index;

},

}

})

实现效果如下：

感谢原作者