<div class="tabs-list"> <div class="tabs-content"> <div v-for="(item,index) in test" :key="index" @click="txt(index)" :class="current === index?‘active‘:‘‘">{{item}}</div> </div> </div>

.tabs-content { display: flex; div{ position: relative; margin: 0 20px; line-height: 40px; } div::before{ content: ""; position: absolute; bottom: 0; left: 100%; width: 0; height: 100%; border-bottom: 2px solid blue; transition: 0.1s all linear; } div.active{ color: blue; } div.active::before{ width: 100%; left: 0; } div.active ~ div::before{ left: 0; } }

tab css 切换效果