VUE自定义Tab切换栏组件

声明：此写法可通用为简易自定义单选组件

• template

  <span
     v-for="(tab,i) in tabs"
     v-bind:key="i"
     v-bind:class="['flex flex-x-center flex-y-center', {active: currentTab === tab.id}]"
      //active为选中样式
     v-on:click="currentTab = tab.id,changeTab(tab.id)"
      //可设置多个事件、判断，简易判断可直接写在click后也可写入方法内
    >{{tab.name}}</span>
  
  <div v-show="currentTab==0">引入组件或是填入dom均可</div>
  <div v-show="currentTab==1"></div>
  

• js

   data(){
    return{
      currentTab: 0,//切换角色，设置默认选中项
      tabs: [
        {
          id:0,
          name:'我的求职'
        },
        {
          id:1,
          name:'我的招聘'
        }
      ],
    },
    mounted(){
        this.currentTab = this.$store.state.isTabNum;
        //设置状态值，以便离开此页面返回可记住选中的tab
        //在vuex设值变量值 isTabNum
    },
    methods: {
      //切换角色
      changeTab(i){
      //  this.currentTab=i; 此处与写在click中一样意义
          this.$store.state.isTabNum = i;
      }
    }
  },