vue動態綁定class 選中當前列表變色

這個小技巧在工作當中是非常實用而且經常用到的  希望小伙伴兒們能學到。

先看看效果圖吧

接下來我們看看怎么實現的吧

在methods中寫入一個方法

clickcategory(index){ // 這里我們傳入一個當前值
　　this.categoryIndex = index
}

然后需要在data里面注冊一下

data() {
      return {
        categoryIndex: 0, //點擊當前背景變成白色索引
      }
    },

在css中設置我們當前選中項為active的類名，並給與一個白色的背景顏色

  .active {
    background: #fff
  }

接下來在html中綁定

<li  @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 選中當前動態綁定class -->

</li>

 嗯哼  於是乎我們的點擊選中當前改變背景色就這樣完成了