vue2.0 tab切換幾種方式
阿新 • • 發佈:2017-09-06
nts har () jquer 方式 ace his -c ddd
第一種 比較靈活簡單的方式(切換改變部分的內容在組件中比較方便操作)
<template> <div id="app"> <ul> <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}"> {{tab.type}} </li> </ul> <!--:is實現多個組件實現同一個掛載點--> <component :is="currentView"></component> </div> </template> <script> import tab1 from ‘./components/tabs/tab1.vue‘ import tab2 from ‘./components/tabs/tab2.vue‘ export default { 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 } } </script> <style> #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; } </style>
第二種(比較死板,內容被固定住了)
<template> <div id="app"> <ul > <li v-for="(tab,index) in tabs" :class="{active:num==index}" @click="table(index)">{{tab}}</li> </ul> <div class="tabContent"> <div v-for="(tabCon,index) in tabsCon" v-show="index==num">{{tabCon}}</div> </div> </div> </template> <script> /*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 }*/ } </script> <style> #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; } </style>
第三種(比較死板,內容被固定住了,使用過jquery的人習慣用的方式)
<template> <div id="app"> <div class="nav-tab"> <a v-for="(value,index) in tab" :class="{active:value.isactive}" @click="change(index)"> {{value.title}} </a> </div> <div class="tabs"> <div v-for="(value,index) in tab" class="tab" :class="{active:value.isactive}">{{value.content}}</div> </div> </div> </template> <script> /*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 } } } </script> <style> *{ 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; } </style>
vue2.0 tab切換幾種方式