1. 程式人生 > >vue動態繫結class 選中當前列表變色

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>

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