vue怎么按键盘上下左右使div移动，求大神进行解答，小弟感激不尽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方向键移动div</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
}
</style>
<script>
window.onload = function () {
var b1 = document.getElementById("box1");
var distance = 10;
alert("按下ctrl键加速,按下alt键减速");
document.onkeydown = function (event) {
event = event || window.event;
if (event.ctrlKey) {
distance = 40;
}
if (event.shiftKey) {
distance = 5;
}
if (event.keyCode === 37) {
b1.style.left = b1.offsetLeft - distance + "px";
} else if (event.keyCode === 38) {
b1.style.top = b1.offsetTop - distance + "px";
} else if (event.keyCode === 39) {
b1.style.left = b1.offsetLeft + distance + "px";
} else if (event.keyCode === 40) {
b1.style.top = b1.offsetTop + distance + "px";
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
题目:
用VUE实现
创建一个div 在div上按键盘中的 上下左右，
这个div会根据你所按的键盘，来进行移动，
每次移动 10px，上下左右，div会有四个颜色，
div中的文字 随着上下左右 而变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 容器 -->
<div id="app">
<!-- contenteditable="true"设置div为可编辑状态 -->
<div id="hz" contenteditable="true" @keydown="move" :style="hz">
{{message}}
</div>
</div>
<script type="text/javascript">
let vk = new Vue({
el: "#app",
data: {
message: "hello",
bl: {
left: 100,
top: 100
},
hz: {
height: 90 + 'px',
width: 90 + 'px',
backgroundColor: '#7FFFD4',
position: 'absolute',
left: 100 + 'px',
top: 100 + 'px'
}
},
methods: {
move(e) {
switch (e.keyCode) {
case 37:
vk.message = "你向左移动了一次";
vk.hz.backgroundColor = "#aaaaff";
vk.bl.left -= 10;
vk.hz.left = vk.bl.left + 'px';
break;
case 38:
vk.message = "你向上移动了一次";
vk.hz.backgroundColor = "#ffaa00";
vk.bl.top -= 10;
vk.hz.top = vk.bl.top + 'px';
break;
case 39:
vk.message = "你向右移动了一次";
vk.hz.backgroundColor = "#00aa7f";
vk.bl.left += 10;
vk.hz.left = vk.bl.left + 'px';
break;
case 40:
vk.message = "你向下移动了一次";
vk.hz.backgroundColor = "#ffff7f";
vk.bl.top += 10;
vk.hz.top = vk.bl.top + 'px';
break;
}
console.log(vk.hz.left)
}
}
})
</script>
</body>
</html>
注意改一下vue引入的地址