Vue.js 中使用 :style 和 transform 控制 div 位置

<template>
  <div :style="{ transform: 'translate(' + x + 'px, ' + y + 'px)' }">Hello World</div>
</template>
<script>
export default {
  data() {
    return {
      x: 0,
      y: 0
    }
  },
  mounted() {
    // 改变 x 和 y 的值来控制 div 的位置
    this.x = 100
    this.y = 200
  }
}
</script>
<p>在上述代码中，我们在 div 上使用了 :style 绑定了一个对象，对象中的 transform 属性控制了 div 的位置，通过改变 x 和 y 的值可以改变 div 的位置。</p>