vue实现tab切换效果

效果图：

代码展示：

html文件

<div class="div-status">  
    <div class="item" @tap='tabChange(1)' > 
        <div :class="{total:tab == 1}">HTML</div>
    </div>
    <div class="item" @tap="tabChange(2)">
         <div :class="{total:tab == 2}">CSS</div>
    </div>
    <div class="item" @tap="tabChange(3)">
         <div :class="{total:tab == 3}">JS</div>
    </div> 
    <div class="item" @tap="tabChange(4)" > 
         <div :class="{total:tab == 4}">VUE</div>
    </div>
</div>

vue文件

var vm = new Vue({
    el: '.div-status',
    data: {
	tab:1,//默认选中第一个
    },
    methods:{
	tabChange(event){
            this.tab = event
	},
    }
})

css文件

.div-status {
    display: flex;
    height: 45px;
    padding-top: 4px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background-color: #007aff;
}
.item{
    flex: 1;
}
.div-status div{
    text-align: center;
}
/* 点击对应的标题添加对应的下划线效果 */
.total{
    text-decoration:none;
    border-bottom:2px solid white; 
    display: inline-block; 
    padding-bottom:1px;
}