Vue 中使用 :style 控制 div 位置：transform 属性详解

<template>
  <div :style="{ transform: 'translateX(' + xPosition + 'px) translateY(' + yPosition + 'px)' }">
    This div can be moved using the xPosition and yPosition variables.
  </div>
</template>
<script>
export default {
  data() {
    return {
      xPosition: 0,
      yPosition: 0,
    };
  },
  methods: {
    moveDiv(event) {
      this.xPosition = event.clientX;
      this.yPosition = event.clientY;
    },
  },
};
</script>
<p>在上面的代码中，我们使用了:style来动态绑定div的样式，其中transform属性用于控制div的位置。我们使用了translateX和translateY来控制div在水平和垂直方向上的位置，这两个属性接受一个像素值作为参数。我们还定义了xPosition和yPosition变量来存储div的当前位置，然后在moveDiv方法中更新这些变量。最后，在div上绑定了一个mousemove事件，当鼠标移动时会调用moveDiv方法来更新div的位置。</p>