登录 注册 切换tab

                <div style="background-color: #2e2828;">
                    <ul class="tab">
                        <li v-for="item in menuTab" :key="item.id" :class="{'current':item.current}" @click="togglemneu(item)">{{item.txt}}</li>
                    </ul>
                </div>

    data(){
        return{
            menuTab:[
                {txt:'登录',current:true},
                {txt:'注册',current:false}
            ]
        }
    },
    methods:{
        togglemneu(data){
            this.menuTab.forEach(Element=>{
                Element.current = false
            });
            data.current = true
        }
    }

.tab{
    text-align: center;
}
.tab li{
    display: inline-block;
    width: 88px;
    line-height: 36px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 2px;
}
.current{
    background-color: rgb(3, 3, 92);
}

效果如下：

点击切换

来源：https://www.cnblogs.com/lsyy2017/p/12219916.html