js实现标签页切换

<template>
  <div class="productGetmessage">
    <div class="productGet">
    <ul>
      <li v-for="(item,index) in getmessageTab" :key="index" @click="changeTabs(index)" 
      :class="[active==index?'amplification': '']">
        {{item}}
        <span v-show="active==index"></span>
      </li>
    </ul>
    <div class="getmessageBackground"></div>
    <div>
      <div v-show="active==0">
        <simpleVersions></simpleVersions>
      </div>
      <div v-show="active==1">经济版</div>
      <div v-show="active==2">豪华版</div>
    </div>
    </div>
  </div>
</template>
<script>
import simpleVersions from './simpleVersions.vue'
import "@/style/vehicle/productGetmessage.less";
export default {
  components: {
    simpleVersions
  },
  data() {
    return {
      getmessageTab: ["简约版", "经济版", "豪华版"],
      active: 0
    };
  },
  methods: {
    changeTabs(index) {
      this.active = index;
    }
  }
};
</script>
<style lang="less" scoped>
.productGetmessage {
  ul {
    padding: 0 52px;
    overflow: hidden;
    li {
      float: left;
      font-size: 14px;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      line-height: 46px;
      margin-right: 68px;
      span {
        height: 5px;
        width: 28px;
        border-radius: 6px;
        background: #3b8afe;
        display: block;
        margin: 0 auto;
      }
    }
    li:last-child {
      margin-right: 0;
    }
    .amplification {
      font-size: 17px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
  .getmessageBackground {
    height: 11px;
    background: rgba(247, 247, 247, 1);
  }
}

</style>

上图：