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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
JS闭包经典实例详解
Dec 20 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
5种 JavaScript 方式实现数组扁平化
Oct 05 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
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
Opacity.js
2007/01/22 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
使用python为mysql实现restful接口
2018/01/05 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
保送生自荐信范文
2013/10/06 职场文书
金融专业个人的自我评价
2013/10/18 职场文书
自主招生推荐信范文
2014/05/10 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2014年班级工作总结
2014/11/14 职场文书
生死抉择观后感
2015/06/09 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
服务行业标语口号
2015/12/26 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL