我是靠谱客的博主 开放眼神,这篇文章主要介绍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;

}

}

})

```

最后

以上就是开放眼神最近收集整理的关于tab按钮样式 vue_Vue.js实现tab切换外加样式切换方法的全部内容,更多相关tab按钮样式内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部