vue学习 三 事件绑定v-on的使用
vue学习 三 事件绑定v-on的使用
meihuasheng
发布于 2021-03-16 21:41:17
发布于 2021-03-16 21:41:17
v-on：我的理解是绑定事件监听器，比如鼠标点击事件绑定，然后就可以写函数去做一些交互了
如下： 给点击事件click绑定，设置add有参方法后就可以让age在点击时自增一，再者就可以给双击事件dblclick绑定等等，所以v-on的作用就这样，v-on的缩写形式： 效果一样
<a @click="add(1)">增加一岁</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<h1>事件的知识</h1>
<button v-on:click="add(1)">涨一岁</button>
<button v-on:click="del(1)">减一岁</button>
<br />
<button v-on:dblclick="add(10)">涨十岁</button>
<button v-on:dblclick="del(10)">减十岁</button>
<p>my age is {{age}}</p> <br />
<div id="canvas" v-on:mousemove="updateXY">
{{x}} ,{{y}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
age:22,
x:0,
y:0
},
methods:{
add: function(inc){
this.age+=inc;
},
del: function(dlc){
this.age-=dlc;
},
updateXY: function(event){
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
}
}
});
</script>
</body>
</html>
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读