Vue监听事件实现计数点击依次增加的方法

1.实现计数器功能，每点击一次按钮，count值增加一或增加二，鼠标在cordinates行移动时会更新当前坐标，通过自定义函数或者stop属性禁止事件传播。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了灌云免费建站欢迎大家使用！

效果如下：

代码如下：

<!DOCTYPE html><html><head>	
<meta charset="utf-8">	
<title>计数器自增函数</title>	
<script src="vue.js"></script></head><body> <div id="app"> 	
<button v-on:click="increase">点击加一</button> 	
<!--自定义步长--> 	
<button v-on:click="increase2(2,$event)">点击加二</button> 	
<p>{{count}}</p> 	
<!--实现鼠标在此行移动时显示位置坐标--> 	
<p v-on:mousemove="updateCordinates"> 	
cordinates:({{x}}/{{y}})- 
  
<!--下面两种方法实现的效果相同--> 	
<span v-on:mousemove="dummy">STOP UPDATE</span> 	
<!--这里的stop后不能加小括号--> 	
<span v-on:mousemove.stop>stop update too!</span> </p> </div> <script> 	
new Vue({ 		
el:'#app', 		
data:{ 			
count:0, 			
x:0, 			
y:0 		
}, 		
methods:{ 			
increase:function(){ 				
this.count++; 			
}, 			
increase2:function (step,event){ 				
this.count+=step; 			
}, 			
updateCordinates:function(event){ 				
this.x=event.clientX; 				
this.y=event.clientY; 			
}, 			
dummy:function(event){ 				
event.stopPropagation(); 			
} 		
} 	
}) </script></body></html>

注意：关键字，标签，括号等不能使用中文，否则也会出错。

以上这篇Vue监听事件实现计数点击依次增加的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

网站栏目：Vue监听事件实现计数点击依次增加的方法
新闻来源：https://www.cdcxhl.com/article14/ihpode.html

成都网站建设公司_创新互联，为您提供动态网站、服务器托管、外贸网站建设、全网营销推广、网站改版、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容