在Vue2中，我们获取元素都是通过给元素一个 ref 属性，然后通过 this.$refs.xx 来访问的，但这在Vue3中已经不再适用了。
来看看Vue3中是如何获取元素的吧：
<template>
<div>
<div ref="el">div元素</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
// 创建一个DOM引用，名称必须与元素的ref属性名相同
const el = ref(null)
// 在挂载后才能通过 el 获取到目标元素
onMounted(() => {
el.value.innerHTML = '内容被修改'
})
// 把创建的引用 return 出去
return {el}
}
}
</script>获取元素的操作一共分为以下几个步骤：文章来源：https://www.toymoban.com/news/detail-521354.html
- 先给目标元素的
ref属性设置一个值，假设为el - 然后在
setup函数中调用ref函数，值为null，并赋值给变量el，这里要注意，该变量名必须与我们给元素设置的ref属性名相同 - 把对元素的引用变量
el返回（return）出去
补充：设置的元素引用变量只有在组件挂载后才能访问到，因此在挂载前对元素进行操作都是无效的文章来源地址https://www.toymoban.com/news/detail-521354.html
到了这里，关于vue3获取标签元素的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
