tab按钮样式 vue_Vue.js实现tab切换外加样式切换方法

Vue.js实现tab切换外加样式切换方法

发布于 2020-3-12|

复制链接

下面小妖就为大家分享一篇vue实现tab切换外加样式切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧

实例如下所示：

```xhtml

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;

}

}

})

```