tab vue 竖排_vue tab切换的几种方式

第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作)

• {{tab.type}}

name:'app',

data(){return{

active:0,

currentView:'tab1',

tabs:[

{

type:'tab1',

view:'tab1'},

{

type:'tab2',

view:'tab2'}

]

}

},

methods:{

toggle(i,v){this.active=i;this.currentView=v;

}

},

components:{

tab1,

tab2

}

}

font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/*text-align: center;

color: #2c3e50;

margin-top: 60px;*/}

ul{

width:200px;

display:flex;

}

ul li{

width:100px;

height:40px;

background: #ccc;

display: inline-flex;

border-right:1px solid #ddd;

justify-content: center;

align-items: center;

cursor:pointer

}

ul li.active{

background:#333;

}

第二种(比较死板，内容被固定住了)

• {{tab}}

{{tabCon}}

/*import tab1 from './components/tabs/tab1.vue'

import tab2 from './components/tabs/tab2.vue'*/

export default {

name: 'app',

data(){

return {

tabs:['按钮1','按钮2'],

tabsCon:['内容1','内容2'],

num:0

}

},

methods:{

table(index) {

this.num = index;

}

}

/* components:{

tab1,

tab2

}*/

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

/* text-align: center;

color: #2c3e50;

margin-top: 60px; */

}

ul{

width:200px;

display:flex;

}

ul li{

width:100px;

height:40px;

background: #ccc;

display: inline-flex;

border-right:1px solid #ddd;

justify-content: center;

align-items: center;

cursor:pointer;

}

ul li.active{

background:#333;

}

第三种(比较死板，内容被固定住了，使用过jquery的人习惯用的方式)

{{value.title}}

{{value.content}}

/*import tab1 from './components/tabs/tab1.vue'

import tab2 from './components/tabs/tab2.vue'*/

export default {

name: 'app',

data(){

return {

tab: [{

title: 'tab1',

content: 'this is tab1',

isactive: true

}, {

title: 'tab2',

content: 'this is tab2',

isactive: false

}]

}

},

methods: {

change(index){

this.tab.forEach(function(v){

v.isactive=false

})

this.tab[index].isactive=true

}

}

}

*{

padding:0;

margin:0;

box-sizing:border-box;

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

/* text-align: center;

color: #2c3e50;

margin-top: 60px; */

width:100%;

}

.nav-tab{

width:100%;

height: 30px;

line-height:30px;

display:flex;

justify-content: space-around;

}

.nav-tab a{

flex:1;

text-align: center;

background:#ccc;

border-right:1px solid #ddd;

cursor:pointer;

}

.nav-tab a.active{

border-bottom:1px solid red;

}

.tabs .tab{

display: none;

}

.tabs .tab.active{

display:block;

}