vuediv跟随鼠标显示坐标

在Vue.js中，如果你想创建一个div元素跟随鼠标移动并显示当前鼠标的坐标，你可以利用JavaScript事件监听和计算函数来实现这个功能。以下是一个简单的示例：

首先，在HTML模板中创建一个动态的div，并添加`ref`属性以便在JavaScript中引用它：

<div ref="mousePosition" style="position:absolute; background-color:red; display:none;" @mousemove.capture="showPosition"></div>

然后，在Vue组件的script部分编写相应的methods:

export default {
  data() {
    return {
      mouseX: null,
      mouseY: null,
    };
  },
  methods: {
    showPosition(e) {
      this.mousePosition.style.display = 'block';
      this.mousePosition.innerText = `鼠标位置: X=${e.clientX}, Y=${e.clientY}`;
    },
  },
};

在这个例子中，当鼠标在`mousePosition` div上移动时，`@mousemove.capture`事件会被触发，`showPosition`方法会被调用。该方法会更新div的内容为当前的鼠标坐标，并显示出来。

记得在CSS中设置`display:none`来让div初始时不显示，直到鼠标移到上面才会显示。