编程 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 相关文章推荐

Jquery实现带动画效果的经典二级导航菜单

Mar 22 Javascript

iframe里面的元素触发父窗口元素事件的jquery代码

Oct 19 Javascript

Node.js与Sails ~项目结构与Mvc实现及日志机制

Oct 14 Javascript

JS简单限制textarea内输入字符数量的方法

Oct 14 Javascript

JavaScript保留关键字汇总

Dec 01 Javascript

JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

Dec 02 Javascript

node.js基于mongodb的搜索分页示例

Jan 22 Javascript

js实现带三角符的手风琴效果

Mar 01 Javascript

vue兄弟组件传递数据的实例

Sep 06 Javascript

关于微信小程序map组件z-index的层级问题分析

Jul 09 Javascript

layUI实现前端分页和后端分页

Jul 27 Javascript

vue项目打包之开发环境和部署环境的实现

Apr 23 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中文乱码

2009/11/26 PHP

使用PHP函数scandir排除特定目录

2014/06/12 PHP

JavaScript replace(rgExp,fn)正则替换的用法

2010/03/04 Javascript

style、 currentStyle、 runtimeStyle区别分析

2010/08/01 Javascript

JavaScript入门之对象与JSON详解

2011/10/21 Javascript

js关闭子窗体刷新父窗体实现方法

2012/12/04 Javascript

nodejs教程安装express及配置app.js文件的详细步骤

2013/05/11 NodeJs

js获取GridView中行数据的两种方法分享

2013/07/13 Javascript

javascript验证只能输入数字和一个小数点示例

2013/10/21 Javascript

jquery实现预览提交的表单代码分享

2014/05/21 Javascript

JavaScript判断FileUpload控件上传文件类型

2015/09/28 Javascript

Jquery使用小技巧汇总

2015/12/29 Javascript

AngularGauge 属性解析详解

2016/09/06 Javascript

js与jquery分别实现tab标签页功能的方法

2016/11/18 Javascript

javascript表单正则应用

2017/02/04 Javascript

AngularJS Toaster使用详解

2017/02/24 Javascript

javaScript 逻辑运算符使用技巧整理

2017/05/03 Javascript

js实现一个简单的MVVM框架示例

2018/01/15 Javascript

vue-cli中使用高德地图的方法示例

2019/03/28 Javascript

JS实现压缩上传图片base64长度功能

2019/12/03 Javascript

vue element ui validate 主动触发错误提示操作

2020/09/21 Javascript

Vue 实现可视化拖拽页面编辑器

2021/02/01 Vue.js

[02:03]风行者至宝清风环佩外观展示

2020/09/05 DOTA

selenium+python自动化测试之多窗口切换

2019/01/23 Python

python实现DEM数据的阴影生成的方法

2019/07/23 Python

Python Web程序搭建简单的Web服务器

2019/07/31 Python

Python实现微信中找回好友、群聊用户撤回的消息功能示例

2019/08/23 Python

Flask 上传自定义头像的实例详解

2020/01/09 Python

keras 简单 lstm实例(基于one-hot编码)

2020/07/02 Python

Django数据库迁移常见使用方法

2020/11/12 Python

中国最大的名表商城：万表网

2016/08/29 全球购物

goodhealth官方海外旗舰店：新西兰国民营养师

2017/12/15 全球购物

戴尔美国官方折扣店：Dell Outlet

2018/02/13 全球购物

中学生期中自我鉴定

2014/04/20 职场文书

护理工作心得体会

2016/01/22 职场文书

Vue全局事件总线你了解吗

2022/02/24 Vue.js