自定义 tab切换

首先自定义class类名 通过 data 切换 样式

<div class="tabs-group-box flex-ps">
         <div :class="['tabs-item', tabActive == 1 ? 'tabs-item-active' : '']" @click="tabChange(1)">1111</div>
            <div :class="['tabs-item', tabActive == 2 ? 'tabs-item-active' : '']" @click="tabChange(2)">2222</div>
            <div :class="['tabs-item', tabActive == 3 ? 'tabs-item-active' : '']" @click="tabChange(3)">3333</div>
            <div :class="['tabs-item', tabActive == 4 ? 'tabs-item-active' : '']" @click="tabChange(4)">444</div>
</div>

       <div v-if="tabActive == 2" class="sf-list-box">
             2222
        </div>
        <div v-else-if="tabActive == 3" class="sf-list-box">
           33333
        </div>
        <div v-else-if="tabActive == 4" class="sf-list-box">
            4444
        </div>

在data中定义

data() {
        return {
            tabActive: 1, // 通过tab切换
        };
    },

切换事件

     // 标签页改变 
        tabChange(val){
            this.tabActive = val;
        },

设置css样式 （lang="scss"）

.tabs-group-box{
    width: 100%;
    margin-top: 20px;
    display: inline-table;
    .tabs-item {
        vertical-align: bottom;
        margin: 0;
        display: inline-block;
        padding: 0 25px;
        list-style: none;
        font-size: 15px;
        font-weight: 500;
        height: 40px;
        line-height: 40px;
        border: 1px solid #808080;
        background: #E4E7ED;
        cursor: pointer;
    }
    .tabs-item-active{
        height: 50px;
        line-height: 50px;
        background: none;
    }
}