如何在VUE $ ref对象中动态分类属性更改

Question

我得到了一个vue对象的实例，即在代码中，我正在添加一个类：

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

，但我也希望在代码中更改" className"中的某些内容：

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

我该怎么做？我想更改"顶部"one_answers"左"，它们正在根据屏幕上的鼠标移动位置进行更改。任何想法？我如何访问同一类并更改其属性值？className是被更改的东西。

Answer 1

实际上您只需要绑定样式检查文档

<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