tab按钮样式 vue_vue实现tab切换外加样式切换方法

实例如下所示：

Title

* {

margin: 0;

padding: 0;

list-style: none

}

#app {

width: 504px;

height: 300px;

margin: 100px auto;

border: 1px solid #000;

}

ul {

overflow: hidden;

}

li {

width: 100px;

height: 50px;

float: left;

text-align: center;

line-height: 50px;

border-bottom: 1px solid #000;

border-right: 1px solid #000;

}

li:nth-child(5) {

border-right: none;

}

.cur {

height: 51px;

background: blue;

border-bottom: none;

}

• {{num.t}}

const text1 = Vue.component('text1', {template: `

Text111111111111

`});

const text2 = Vue.component('text2', {template: `

Text222222222222

`});

const text3 = Vue.component('text3', {template: `

Text333333333333

`});

const text4 = Vue.component('text4', {template: `

Text444444444444

`});

const text5 = Vue.component('text5', {template: `

Text555555555555

`});

var vm = new Vue({

el: "#app",

data: {

currentView: text1,

nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}],

iscur: 0

},

methods: {

tab(tabText){

this.currentView = tabText;

}

}

})

以上这篇vue实现tab切换外加样式切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

详解使用vue实现tab 切换操作

Vue.js组件tab实现选项卡切换

Vue.js组件tabs实现选项卡切换效果

Vue.js tab实现选项卡切换

vue实现样式之间的切换及vue动态样式的实现方法

时间： 2018-03-13