vue事件的绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="./02.css" type="text/css" rel="stylesheet" />
<script src="./vue.js"></script>
</head>
<body>
<div id="vue-app02">
<h1>Elment</h1>
<p>My name is : {{age}}</p>
<button v-on:click="add(1)">长一岁</button>
<button @click="substruct(1)">减一岁</button>
<button v-on:dblclick="add(10)">长一岁</button>
<button v-on:dblclick="substruct(10)">减一岁</button>
<div id="a" v-on:mousemove="takeXY">
{{x}} , {{y}}
</div>
</div>
<script src="event.js"></script>
</body>
</html>

 

 

 

 

vue.js

new Vue({
el:"#vue-app02",
data:{
age:30,
x:0,
y:0,
},
methods:{
add:function(inc){
this.age+=inc;
},
substruct:function(dec){
this.age-=dec;
},
takeXY:function(event){
this.x=event.offsetX;
this.y=event.offsetY;
}

}
})

posted @ 2020-05-09 09:40  Smile*^  阅读(137)  评论(0编辑  收藏  举报