VUE按钮激活事件

首先先来看一下 按钮的三种触发方式

1. 鼠标移入

v-on:mouseenter=“dataDetails"

2.鼠标移动出来

v-on:mouseleave=“hiddenDetail"

3 .点击事件

v-on:click=“hiddenDetail”

---

html中的写法

<div :class="{'active':activeStatus}" @click="activeStatus=!activeStatus">

     这是一个点击激活按钮

</div>

js中的写法

data() {

return {

this.activeStatus=true;

}

}

methods: {

active(){

this.activeStatus=true;

setTimeout(()=>{this.activeStatus=false},200)

},

}

最后就是 在 style中 加css中的激活样式了

.active{

background-color: #EF3800;

color: lawngreen

}