Vue实现active点击切换样式

1.html

  <div class="filter-nav" v-for="(item,index)  in  filterData.navTab" :key="index" :class="{'active':currentSort==index}" @click="active(index)">
          <span>{{item.name}}</span>
          <i v-if="item.icon" :class="'fa fa-'+item.icon"></i>
        </div>

2.在循环的代码那里添加 

 :class="{'active':currentSort==index}"

3.添加样式

.active {
    color: #009eef;
}

4.初始化数据

 data() {
    return {
        currentSort:0,
    }
  },

5.调用方法

 methods: {
    active(index) {
       this.currentSort  =  index;
    }
  },

当我们触发点击事件的时候，传入循环的index  ,这样我们就可以将绑定房东样式赋给点击到的x 

 

转载于:https://www.cnblogs.com/guangzhou11/p/11116378.html