编程 Javascript

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获取鼠标位置的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

Hi毛哥哥

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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