vue实现tab标签页

效果图：

标签页：

<!--tab页-->
<div class="tab-container">
  <div :class="type==='expend'? 'expend-active':''" style="font-size: 18px;height: 70px;line-height: 70px" @click="yearProcess">年发电量</div>
  <div :class="type==='earning'? 'earning-active': ''" style="font-size: 18px;height: 70px;line-height: 70px" @click="monthProcess">15天发电量</div>
  <div :class="type==='transaccount'?'transaccount-active': ''" style="font-size: 18px;height: 70px;line-height: 70px" @click="planProcess">计划发电量</div>
</div>

js:

<script>
  export default {
    data() {
      return {
        // tab页
        type: 'transaccount',
      }
    },
    methods: {
      //tab页
      yearProcess() {
        this.type = 'expend';
      },
      monthProcess() {
        this.type = 'earning';
      },
      planProcess() {
        this.type = 'transaccount';
      }
    }
  }
</script>

css:

.tab-container {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  /*justify-content:space-around;*/
  /*align-items: center;*/
}

.expend-active {
  height: 70px;
  color: #77787b;
  border-right: 8px solid #0ca168;
}

.earning-active {
  height: 70px;
  color: #77787b;
  border-right: 8px solid #0ca168;
}

.transaccount-active {
  height: 70px;
  color: #77787b;
  border-right: 8px solid #0ca168;
}