vue.js鼠标监听获取鼠标xy坐标
作者：microsoftvs 更新时间：2019/9/7 1:01:19 点击数：2257
vue.js简单的代码实现鼠标监听，获取鼠标xy坐标
实例代码
<!DOCTYPE html>
<html>
<head>
<meta set="UTF-8">
<title>counter</title>
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<style>
#cavans {
border: 1px solid #333;
text-align: center;
width: 400px;
height: 250px;
}
</style>
</head>
<h2>将鼠标移动到下方</h2>
<div id="app">
<div id="cavans" @mousemove="updatexy">
{{x}},{{y}}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
x: 0,
y: 0
},
methods: {
updatexy: function(event) {
this.x = event.offsetX;
this.y = event.offsetY;
}
}
})
</script>
</html>