vue使用实现按键.up,.down,.left,.right操作图片上下左右移动

首先，需要在组件中定义一个data属性，用于存储图片的位置信息：

data() {
  return {
    imgX: 0,
    imgY: 0
  }
}

然后，在组件的mounted()方法中，监听键盘事件，根据不同的按键，改变图片的位置：

mounted() {
  window.addEventListener('keydown', (e) => {
    switch (e.keyCode) {
      case 37: // left arrow
        this.imgX -= 10;
        break;
      case 38: // up arrow
        this.imgY -= 10;
        break;
      case 39: // right arrow
        this.imgX += 10;
        break;
      case 40: // down arrow
        this.imgY += 10;
        break;
    }
  });
}

最后，在模板中绑定图片的样式，实现图片的移动：

<template>
  <div>
    <img :src="imgSrc" :style="{transform: `translate(${imgX}px, ${imgY}px)`}">
  </div>
</template>

其中，imgSrc表示图片的路径，imgX和imgY表示图片的水平和垂直位置，通过绑定样式的transform属性，实现图片的移动。