Vue监听事件实现计数点击依次增加的方法
网络编程 2021-07-04 16:46www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇Vue监听事件实现计数点击依次增加的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者s属性禁止事件传播。
效果如下:
代码如下:
<!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}})- <!--狼蚁网站SEO优化两种方法实现的效果相同--> <span v-on:mousemove="dummy">STOP UPDATE</span> <!--这里的s后不能加小括号--> <span v-on:mousemove.s>s 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.sPropagation(); } } }) </script></body></html>
注意:关键字,标签,括号等不能使用中文,否则也会出错。
以上这篇Vue监听事件实现计数点击依次增加的方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程