在vue中实现多个按钮样式的点击切换？

Question

1.在vue中实现多个按钮样式的点击切换？有多个按钮，点击其中一个出现下划线，而另一个回到原始状态。

点击其中一个两个同时出现下划线样式：

再次点击两个都还原成最初的样式，即有下划线：

如何实现只有被点击的那一个才会出现下划线样式？

这个我写的代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>

<div>
    <HeaderTop title="" class="headertop">
        <span class="mui-icon mui-icon-arrowleft" slot="left" @click="$router.back()"></span>
    </HeaderTop>
    <div class="register">
        <a href="#" :class="isShow"   @click.prevent="comName='number'" @click="changeColor" >短信验证</a>
        <a href="#" :class="isShow"   @click.prevent="comName='email'"  @click="changeColor" >邮箱验证</a>
    </div>
        <component :is="comName"></component>
</div>

</template>

<script>

import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
import email from '../../pages/Login/email.vue'
import number from '../../pages/Login/number.vue'
export default {
    name: "Login",
    data(){
        return{
            comName:'number',
            isShow:true,
            flag:true
        }

    },
    methods:{
       changeColor:function(){
           if(this.flag){
               this.isShow = "massege"
               this.flag = false
           }
           else {
               this.isShow="email"
               this.flag=true
           }

       }
    },
    components:{
        HeaderTop,
        email,
        number
    }
}

</script>

<style scoped lang="scss">

.headertop{background-color: white}
.register{display: flex;width: 60%;margin: 30px auto;justify-content: space-between;
.massege{
    width: 40%;
    position: relative;
    text-align: center;
}
.massege::after{
    content: '';
    width: 60%;
    height: 4px;
    background: #0062cc;
    bottom: -20px;
    position: absolute;
    left: 20px;

}
.email{width: 40%;text-align: center;}
}

</style>

Answer 1

v-if就解决了,样式:class不就好啦

Answer 2

你这个用的很难受 你不如changeColor("msg") changeColor("email")
changeColor(type){ this.active=type}
:class="active=='msg'?'message':''"

Answer 3

fSFFSSFA刚到时感受到

Answer 4

楼主你好~我刚刚做完毕设，也是用的vue，刚才用自己的方法可以实现你所需要的功能。
我使用了jQuery中的addClass()、removeClass()、siblings()这三个方法以及vue中的$event来控制按钮的样式更改。
绑定点击事件的时候在标签中这样写@click="change($event)"
然后在methods中的方法处写形参
change(e){

$(e.currentTarget).addClass('red').siblings().removeClass('red')

}
这是一个思路，具体的样式还需楼主自行处理啦..        :  )