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字典探测用户名工具
Oct 05 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
jquery maxlength使用说明
Sep 09 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 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中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
用python与文件进行交互的方法
2018/03/01 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
晚会主持词开场白
2014/03/17 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
4s店活动策划方案
2014/08/25 职场文书
2015年植树节活动总结
2015/02/06 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书