首先先来看一下 按钮的三种触发方式
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
}
