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

•在data中定义即将渲染的数据，及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:''   }  }  ...

•定义高亮的标签类名

1 2 3 4 5

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

•动态渲染按钮的数据，并动态的增加active类名（当active为当前name值时添加），添加点击事件（点击时让active=name）

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中定义点击事件函数

1 2 3

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