<li v-for="(item,index) in list" :key="index" class="common" :class="index===currentIndex?'active':''">{{item}}</li>
<li v-for="(item,index) in list" :key="index" class="common" :class="{active:index===currentIndex}">{{item}}</li>
<li v-for="(item,index) in list" :key="index" :class="['common',index===currentIndex?'active':'']">{{item}}</li>
<li v-for="(item,index) in list" :key="index" :class="['common',{active:index===currentIndex}]">{{item}}</li>
ul {
display: flex;
.common {
width: 80px;
line-height: 30px;
outline: 1px solid #ccc;
text-align: center;
}
.active {
background-color: #000;
color: #fff;
}
}
![](https://img2020.cnblogs.com/blog/1742906/202108/1742906-20210805210122175-1140643780.png)