vue Tab切换

<template>
  <div id="app">
    <!-- tab切换1 -->
    <button  @click="comName = 'setLogin'">周六</button>
    <button @click="comName = 'login'">周天</button>
    <component :is="comName"></component>


    <!-- tab切换2 -->
    <div id="nav">
      <ul>
      <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}">
        {{tab.type}}
      </li>
    </ul>
    </div>
    <component :is="currentView"></component>


    <!-- tab切换3 -->
    <div id="content">
        <!-- 一种方法展示第一个 -->
        <div id="nav">
            <ul>
            <li v-for="(item,index) in tabss" @click="tab(index)">{{item}}</li>
            </ul>
        </div>
        <div id="main">
            <main v-for="(cont,id) in mainContent" v-show="id==num">{{cont}}</main>
        </div>
        <!-- 一种方法展示第二个 -->
        <div id="nav">
            <ul>
            <li v-for="(item,index) in tabss" @click="tabsss(index)">{{item}}</li>
            </ul>
        </div>
        <div id="main">
            <main v-for="(cont,id) in mainContent" v-show="id==nums">{{cont}}</main>
        </div>
    </div>
  </div>
</template>

<script>
// tab切换1/tab切换2
import setLogin from './setLogin.vue'
import login from './login.vue'
export default {
  name: 'app',
  data(){
    return {
      // tab切换1
      comName: 'setLogin',
      tabs:[
        {
          type:'Tab1',
          view:'setLogin'
        },
        {
          type:'Tab2',
          view:'login'
        }
      ],

      // tab切换2
      currentView:'setLogin',
      active:0,

      // tab切换3
      tabss: ["星期一", "星期二", "星期三", "星期四", "星期五"],
      mainContent: ["上班第一天", "上班第二天", "上班第三天", "上班第四天","上班第五天"],
      num:1,
      nums:2,
    }
  },
  methods:{
    //tab切换2
    toggle(i,v){
      this.active=i;
      this.currentView=v;
    },

    // tab切换3
    tab(index){
      this.num=index;
    },
    tabsss(index){
      this.nums=index;
    },
  },
  // tab切换1/tab切换2
  components:{
    setLogin,
    login
  }
}
</script>

<style>

/* tab切换1*/
button{
   100px;
  line-height: 40px;
  border: 0;
  outline: none;
}


/* tab切换2/tab切换3*/
ul li{
  display: inline;
}

#nav ul {
  display: flex;
}

#nav ul  li{
   100px;
  text-align: center;
  line-height: 40px;
}

#nav ul  li:hover{
  color: red;
  background: black;
}

#main{
   100px;
  text-align: center;
  padding:10px 0px;
  box-sizing: border-box;
}
</style>