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


Posted in Javascript onSeptember 26, 2018

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

效果如下:

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

代码如下:

<!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监听事件实现计数点击依次增加的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
Vue中的Props(不可变状态)
Sep 29 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 #Javascript
You might like
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
载入进度条 效果
2006/07/08 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
茶叶店创业计划书范文
2014/01/19 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
女子职高个人自荐书
2014/02/01 职场文书
岗位职责说明书模板
2014/07/30 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
公司给客户的感谢信
2015/01/23 职场文书
办公室个人总结
2015/02/28 职场文书
导游词之唐山景点
2019/12/18 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python