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

1,199 阅读1分钟

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

1.1目标标签 添加 id或者class

<h3 id="name" class='yuan'>选择器获取原生DOM</h3>

1.2恰当时机 通过id/class 获取目标标签

mounted() {
   // 注意: 如果要寻找的元素有多个重复的 他只会寻找打印出第一个目标元素
   console.log(document.querySeletor('.yuan'))
   console.log(document.getElementById('name'))
}

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

2.1目标标签添加 ref

<h3 ref="sayHi">ref属性获取原生DOM</h3>

2.2 恰当时机 通过ref获取标签

mounted() {
   // 注意: 如果有多个相同的ref名的不同标签 他只会打印出最下面的那个标签
   console.log(this.$refs.sayHi)
}