Vue 中获取原生dom的两种方式

1.通过id或者类名获取原生DOM

// 目标标签  添加 id或者class
<h3 id="name" class='yuan'>选择器获取原生DOM</h3>

// 恰当时机 通过id/class 获取目标标签
mounted() {
   // 注意: 如果要寻找的元素有多个重复的 他只会寻找打印出第一个目标元素
   console.log(document.querySeletor('.yuan'))
   console.log(document.getElementById('name'))
  // 获取组件里的html dom元素，最好使用这两个
}

2.通过 ref属性获取原生DOM标签

// 目标标签添加 ref
<h3 ref="myDom">ref属性获取原生DOM</h3>

// 恰当时机 通过ref获取标签
mounted() {
   // 注意: 如果有多个相同的ref名的不同标签 他只会打印出最下面的那个标签
   console.log(this.$refs.myDom)
}

作者：花开何时落
链接：https://juejin.cn/post/7077065857943207943
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。