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

}