原生tab切换(适用于购物商城中订单管理模块,例如:待付款/待发货/待收货等订单状态)

  <!-- 头部tab栏切换  html部分-->
        <ul class="title-bar">
            <li @click="changeStatus(1)">
                <span :class="{'active':orderStatus==1}">待付款</span>
            </li>
            <li @click="changeStatus(2)">
                <span :class="{'active':orderStatus==2}">待发货</span>
            </li>
            <li @click="changeStatus(3)">
                <span :class="{'active':orderStatus==3}">待收货</span>
            </li>
            <li @click="changeStatus(7)">
                <span :class="{'active':orderStatus==7}">已完成</span>
            </li>
            <li @click="changeStatus(5)">
                <span :class="{'active':orderStatus==5}">退款</span>
            </li>
        </ul>

   <!-- 头部tab栏切换  css部分-->
.title-bar {
    height: 0.8rem;
    background: #fff;
    font-size: 12px;
    position: relative;
    flex: 0 0 0.8rem;
    display: flex;
    align-items: center;
    width: 100%;
    li {
        flex:1;
        text-align: center;
        line-height: 0.8rem;
        span {
            display: inline-block;
            font-size: 0.26rem;
            color: #666666;
            border-bottom: 1px solid transparent;
            width: 80%;
        }
        .active {
            color: red;
            border-bottom: 1px solid red;
        }
    }
    color: #666666;
}
 <!-- 头部tab栏切换  js部分-->
切记在data里面需要定义变量
methods:{
//tab栏切换
        changeStatus(orderStatus) {
            this.orderStatus = orderStatus;
            this.init(); // 这个是调订单管理列表的接口，获取到的数据
        },
}