用mpvue写微信小程序tab栏切换

效果如下图：

index.vue

<div class="test">
      <div class="testNav">
        <div
          :class="{'selected':tab === 1,'testTitle':true}"
          @click="changTab(1)"
        >人气div>
        <div
          :class="{'selected':tab === 2,'testTitle':true}"
          @click="changTab(2)"
        >销量div>
        <div
          :class="{'selected':tab === 3,'testTitle':true}"
          @click="changTab(3)"
        >综合div>
      div>
      <div class="container">
        <div v-if="tab===1">1div>
        <div v-else-if="tab===2">2div>
        <div v-else>3div>
      div>
    div>

js

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

样式

.test {
    width: 100%;
    .testNav {
        padding: 0 20rpx;
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        .testTitle {
            flex: 1;
            text-align: center;
        }
        .selected {
            color: #87caee;
            border-bottom: 1px solid #87caee;
        }
    }
    .container {}
}