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; }