vue實現點擊樣式高亮

•在data中定義即將渲染的數據，及active

data() {

     return {

       active : '', //選中樣式

    };

  },

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

data() {    return {     wpList: [      {       name: '食品飲料'      },      {       name: '鮮花'      },      {       name: '蛋糕'      },      {       name: '水果生鮮'      },      {       name: '服裝鞋帽'      },      {       name: '其它'      }     ],     active: ''    }   }   ...

•定義高亮的標簽類名

.active {

   font-size :  16px;

   color :  red;

}

1 2 3 4 5

.active {    background: #fd7522;    border: 1px solid #fd7522;    color: #fff;   }

•動態渲染按鈕的數據，並動態的增加active類名（當active為當前name值時添加），添加點擊事件（點擊時讓active=name）

< div

           class = "aside-name-active"

           @ click = " slide ( item ,  index ) "

           v-for = " ( item ,  index )  in   goodsList "

           : key = " item . id "

           : class = " { active : active   ==   item . name } "

         >

          {{  item . name  }}

         </ div >

1 2 3 4 5

<el-row class= "wp-list" >    <el-button v- for = "item in wpList" :key= "item.name"    :class= "{active : active == item.name}"    @click= "selected(item.name)" >{{item.name}}</el-button> </el-row>

•在methods中定義點擊事件函數

  slide( item,  index) {

       this. active  =  item. name

    }

1 2 3

selected(name){    this .active = name; }