vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 类名获取动态生成的元素

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

作者:北岭有燕

这篇文章主要介绍了vue类名如何获取动态生成的元素,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

类名获取动态生成的元素

首先注意的是,该元素必须在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
<div ref="div_1">获取元素</div>
// 获取并操作
this.$refs.div_1.style.backgroundColor="red"

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

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

您可能感兴趣的文章:
阅读全文