vue swiper tab

<template>
  <div id="app">
    <div class="tab">
      <ul>
        <li @click="onActive(0)" :class="index==0?'active':''">
          版本1
        </li>
        <li @click="onActive(1)" :class="index==1?'active':''">
          版本2
        </li>
        <li @click="onActive(2)" :class="index==2?'active':''">
          版本3
        </li>
      </ul>
    </div>
    <div class="container">
      <swiper
        :options="swiperOption"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        ref="mySwiper">
          <swiper-slide>
            <div class="version">
              111
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="version"> 
              222
            </div>
          </swiper-slide>
          <swiper-slide>
              <div class="version"> 
                333
              </div>
          </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

export default {
  name: 'App',
  data(){
    return{
      index:0,
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
      }
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    // VueTabsSwipe
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    onSwiper () {
      
    },
    onSlideChange () {
      this.index = this.$refs.mySwiper.$swiper.activeIndex
    },
    onActive(index){
      this.index = index
      console.log(this.index)
      this.swiper.slideTo(index,1000,false)
    }
  }
}

*{
  margin: 0;
  padding: 0;
}
.tab{
  position: fixed;
  width: 100%;
  z-index: 999;
  background: #FFF;
}
ul{
  list-style: none;
  display: flex;
  justify-content: center;
}
li{
  width: 30%;
  height: 35px;
  line-height: 35px;
}
.version{
  height: 600px;
  color: #FFF;
}
.container{
  padding-top: 55px;
  background: #CCC;
}
li.active{
  border-bottom: 1px solid red;
  border-width: 2px;
}