vue2.0获取鼠标位置的方法


Posted in Javascript onSeptember 13, 2018

如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
#canvas{
width: 500px;
height: 500px;
text-align: center;
line-height: 500px;
border: 1px solid #E5E5E5;
margin: 0 auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="app">
<div id='canvas' @mousemove='updateXY'>
{{x}} {{y}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
x:0,
y:0
},
methods:{
updateXY:function(event){
this.x=event.offsetX;
this.y=event.offsetY
}
}
})
</script>
</body>
</html>

以上这篇vue2.0获取鼠标位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
vuejs如何配置less
Apr 25 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 #Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 #Javascript
JSONP原理及应用实例详解
Sep 13 #Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 #Javascript
javascript将非数值转换为数值
Sep 13 #Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 #Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jquery图片切换插件
2015/03/16 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
react实现菜单权限控制的方法
2017/12/11 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
layui实现数据分页功能
2019/07/27 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
Python外星人入侵游戏编程完整版
2020/03/30 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
目前最全的python的就业方向
2018/06/05 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
校园广播稿100字
2014/10/06 职场文书
运动会开幕词
2015/01/28 职场文书
学生会辞职信
2015/03/02 职场文书
关爱空巢老人感想
2015/08/11 职场文书