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