vue自定义Tab

<view class="tui-cent-tab">
    <block v-for="(item,index) in ranking" :key="index">
        <view class="tui-tab-btn" :class="{activetext:index == num}" @click="menubtn(index)">{{item}}
        </view>
    </block>
</view>
<view class="tui-rink-sceate">
                <!-- 销量 -->
                <view class="tui-tab-rank" :class="[num === 0 ? 'actineclass' : 'errorclass']">
                    <view class="tui-tab-rank-cent">
                        
                    </view>
                </view>
                <!-- 评价 -->
                <view class="tui-tab-rank" :class="[num === 1 ? 'actineclass' : 'errorclass']">2222222222</view>
                <!-- 回购 -->
                <view class="tui-tab-rank" :class="[num === 2 ? 'actineclass' : 'errorclass']">3333333</view>
                <!-- 关注 -->
                <view class="tui-tab-rank" :class="[num === 3 ? 'actineclass' : 'errorclass']">444444444</view>
            </view>

<script>
export default {
        data() {
            return {
                num:0,
                ranking:['销量榜','评价榜','关注榜','回购榜']
              }
          },
          methods:{
        menubtn(index){
                this.num = index
            },
      }
  }
</script>
<style>
/* 排行榜 */
    .tui-cent-box{
        border-radius: 60rpx 60rpx 0 0 ;
        height: 2000px;
        background-color: #fff;
        position: relative;
        top: -42rpx;
        padding: 0 30rpx;
        
    }
.tui-tab-btn{
        flex: 1;
        width: 25%;
        text-align: center;
        font-size: 20rpx;
        color: #333333;
        line-height: 60rpx;
        
    }
.activetext{
        color: #fff !important;
        background-image: linear-gradient(to right, #FF943D , #FF5600);
        border-radius: 60rpx;
        }
.actineclass{display: block; margin-top: 100rpx; }
 .errorclass{display: none;}
</style>