vue 点击切换样式

把html变成数据循环遍历的形式

1.html

 <div class="typeSeq-left">
     <span @click="allSeq(index)" :class="{styleName:index == current}" v-for="(item,index) in seqList" :key="index" >{{item.seqName}}</span>
  </div>

js文件

data(){
    return{
    seqList:[
      { id:1, seqName: "全部"},
      { id:2, seqName:"成功"},
      { id:3, seqName: "失败"}
      ],
      current:0,
}
}
// 点击改变
 allSeq(index){
      console.log(index)
      this.current = index;
    },

css

.styleName{
    border-bottom: 1px solid #ccc;
  }

效果图

image.png