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 Prototype 对象扩展
May 15 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
TypeScript 中接口详解
Jun 19 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
Javascript缓存API
2016/06/14 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
办公室文秘自我评价
2013/09/21 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
安全员岗位职责
2015/02/10 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
教师节祝酒词
2015/08/11 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis