用mpvue寫小程序的tab切換

<template>
  <div class="result">
    <div class="nav">
      <div
        :class="{'selected':tab === 1,'title':true}" class="default"
        @click="changTab(1)"
      >初級·<span>9</span>
      </div>
      <div
        :class="{'selected':tab === 2,'title':true}" class="default"
        @click="changTab(2)"
      >中級·<span>9</span>
      </div>
      <div
        :class="{'selected':tab === 3,'title':true}" class="default" style="border: 0"
        @click="changTab(3)"
      >高級·<span>9</span>
      </div>
    </div>
    <div class="container">
      <div v-if="tab===1">初級</div>
      <div v-else-if="tab===2">中級</div>
      <div v-else>高級</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tab: 1
      };
    },
    methods: {
      changTab(index) {
        this.tab = index;
      }
    }
  };

</script>

<style lang='scss' scoped>
  .result {
    width: 710rpx;
    .nav {
      padding: 0 20rpx;
      height: 80rpx;
      color: #999999;
      background:#333a49;
      border-radius:10rpx 10rpx 0px 0px;
      display: flex;
      .title {
        flex: 1;
        text-align: center;
      }
      .selected {
        color: #f3cc20;
      }
      .default{
        border-right: 1px solid #cdcdcd;
        margin: 25rpx 0;
      }
    }
  }

</style>