1. 程式人生 > >vue2.0 tab切換幾種方式

vue2.0 tab切換幾種方式

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切換幾種方式