如下所示：
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
< ></ >
< type="text/ " src="js/vue.js" ></ >
<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>
< >
new Vue({
el:'#app',
data:{
x:0,
y:0
},
methods:{
updateXY:function(event){
this.x=event.offsetX;
this.y=event.offsetY
}
}
})
</ >
</body>
</html>
以上这篇vue2.0获取鼠标位置的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
如何入门 MySQL
2026-05-18栏目： 教程
-
Zabbix + Cloud Alert 实践分享
2026-05-18栏目： 教程
-
阿里云容器服务通过LoadBalancer暴露IPv6服务
2026-05-18栏目： 教程
-
阿里云服务器通用网络增强型实例sn2ne 独享主机速度快 适合企业公司使用
2026-05-18栏目： 教程
-
flex布局和grid布局
2026-05-18栏目： 教程