如何实现固定的元素和你渲染的列表元素关联class类的样式

template:

  <div class="tab-con">

      <ul class="tab-ul">

        <li class="tab-li" key="all"><span :class="{'active':'all' ==currentTab}" @click="all">全部</span></li>

        <li class="tab-li" v-for="(item,index) in mylistData" :key="index" ><span :class="{'active': currentTab ==index}" @click="changeTab(index,item)">{{item.businessTypeName}}</span></li>

        <li class="tab-li tab_li"><span  @click="con('/collect')">我的收藏</span></li>

      </ul>

    </div>

style :

 .tab-con{

    width:100%;

    padding:.04rem .02rem;

    margin-top:.05rem;

    background:#fff;

  }

  .tab-con li{

    line-height:.35rem;

    padding-left:.25rem;

  }

  .tab-con .tab-ul{

    display: flex;

    flex-wrap: wrap;

    text-align:center;

  }

  .tab-con .tab-ul .tab-li span{

    width:.65rem;

    height:.3rem;

    line-height:.3rem;

    display:inline-block;

    background:#efefef;

    font-size: .12rem;

    margin-bottom:.1rem;

  }

  .tab-con .tab-ul .tab-li span.active{

    color:#fff;

    background:#049e9d;

  }

script

export default {

data(){

return{

currentTab:'all',

listData:[],

}

},

methods:{

changeTab(index){

this.currentTab=index;

},

all(){

this.currentTab='all'

}

}

}