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 相关文章推荐
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
微信小程序block的使用教程
Apr 01 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
勤俭节约倡议书
2014/04/14 职场文书
环境日宣传活动总结
2014/07/09 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
老公出轨后的保证书
2015/05/08 职场文书
无罪辩护词范文
2015/05/21 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
python本地文件服务器实例教程
2021/05/02 Python
正则表达式基础与常用验证表达式
2022/06/16 Javascript