循环li点击改变样式

页面渲染： 

<ul>
    <li v-for="(item,i) in shishiTypes" :key="i" :class="i === li_active?'s_common top_left_li_act':'s_common top_left_li_default'" @click="setColor(i)">
       <div style="font-size:14px">
                    <span>{{item.name}}</span>
       </div>
       <div style="font-size:14px;font-weight:bold;padding-top:5px">
                    {{item.tatol}}
       </div>
    </li>
</ul>

数据定义：

      li_active:0,
      shishiTypes:[
          {name:"全部",tatol:8},
          {name:"在线",tatol:2},
          {name:"离线",tatol:6},
          {name:"关注",tatol:1}
      ],

js逻辑：

setStyle(index){
      this.li_active = index
    },

css样式：

.s_common{
    border-radius: 4px;
    border: 1px solid #dce1e7;
    background-color: #FFFFFF;
    overflow: hidden;
    color: #303133;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    transition: 0.3s;
    opacity: 0.8;
}
.top_left_li_default{
  background:rgb(220 230 241);color:#333;
}
.top_left_li_act{
  background:rgb(64, 158, 255);color:#fff
}