vue静态类名和动态类名绑定的几种方式

<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;
  }
}