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

2019-11-19 12:56:49

字体：大中小

来源：转载

供稿：网友

如下所示：

<!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下IE浏览器白屏问题

下一篇：vue实现动态列表点击各行换色的方法