vue类名如何获取动态生成的元素

目录

• 类名获取动态生成的元素
• 如何获取并操作dom元素

类名获取动态生成的元素

首先注意的是，该元素必须在id为app这个元素里面

 new Vue({
   el: "#app",
  })

其次是由于动态生成的，想获取到该元素，需要在created里使用nextTick。

并且可以 $(’.circle’ + i)拼接想要的元素类名。

  this.$nextTick(() => {
      for (var i = 1; i < this.carlist.length + 1; i++) {
          $('.circle' + i).css("left", this.random(0, 1650))
      }
  })

在写样式的时候遇到了一点问题：

盒子的margin塌陷（发生在两个盒子嵌套的时候，父盒子和子盒子同时设置margin的时候会出现实际的magin取的是两个margin的最大值）

解决办法：

给父元素增加

overflow:hidden

如何获取并操作dom元素

方法一：

直接给的元素加id,使用document.getElementById(“id”)获取，然后操作 dom 元素

mounted(){
    this.element = document.querySelector('#element_1');
    this.element.style.color = "red";
}

为什么是在mouted钩子使用？

因为只有在执行mounted的时候，vue才已经渲染了dom节点，这个时候是可以获取dom节点的

方法二：

使用ref,给元素添加ref=“name” ，使用 this.$refs.name 获取到该元素，再对元素进行操作

// 定义ref
获取元素
// 获取并操作
this.$refs.div_1.style.backgroundColor="red"

建议：vue中尽量不去操作 dom 元素，选用 ref 操作属性获取

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。