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

}

上一篇:20个梦露的商业计划书


下一篇:VUE中resource的安装与使用