如何动态更改Vue $ ref对象中的类属性？

Question

我有一个vue对象实例，在代码中我添加了一个类：

this.$refs.myrefs[0].$el.classList.add('className');

但是我也想在代码中更改'className'内部的内容：

.className {  
   position: absolute;
   top: 100px;
   left: 100px;
}

我该怎么做？我想更改“ top”和“ left”，它们根据鼠标在屏幕上的移动位置而变化。任何想法？如何访问相同的类并更改其属性值？ className有所更改。

Answer 1

为此，您实际上只需要绑定样式 检查doc

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    left: 0,
    top: 0
  }
}

然后通过鼠标移动，您只需获取鼠标位置并更新该对象 例如

this.styleObject.left = mouseLeft
this.styleObject.top = mouseTop

如果您有许多用于不同DOM元素的样式，那么我建议 使用纯JS

document.getElementById("elementId").style.top = mouseTop
document.getElementById("elementId").style.left = mouseLeft

或

document.querySelector(".className").style.top = mouseTop
document.querySelector(".className").style.left = mouseLeft