Javascript 元素不'；不要把自己放在鼠标下

我正在构建一个简单的拖动功能：

<div class="i-plane">
  <div class='i-interact' @mousedown='handleDown' :style='position'></div>
</div>

<script>
  data: {
    field: {
      x: 0,
      y: 0
    }
    position: {
      transform: 'translate(' + this.field.x + 'px,' + this.field.y + 'px) rotate(' + this.rotate + 'deg)'
    }
  },

  methods: {
    handleMove () {
      this.field.x = e.clientX
      this.field.y = e.clientY
    }
  }
</scrip>

但是

i-interact

元素仍然显示在底部：

---

要动态分配样式，必须在

位置有一个字符串

您可以通过以下示例来了解这一点：

HTML：

<div id="demo">
  <span :style="colorStyle"> {{age}}  </span>
</div>

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '132',
        colorStyle: 'color: red;'
      };
    }
})

看工作小提琴


我发现您在另一个数据变量中使用的是数据变量，这是不可能的。对于这种情况，您可以更好地使用computed属性，请参见下面的示例代码：

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '132',
        color: 'red'
      };
    },
    computed: {
      colorStyle: function() {
         return 'color: ' + this.color + ';'
      }
    }
})

更新了fiddler。
您可以将其添加到吗？我可以删除此问题吗？我用小提琴做了一个更好的问题。@v́̈́̈́̀́́͋不，我刚提出了一个新问题。风格正在指定。只是位置不对。
var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '132',
        color: 'red'
      };
    },
    computed: {
      colorStyle: function() {
         return 'color: ' + this.color + ';'
      }
    }
})