Vue3中简单获取DOM元素的四种方法

2023-10-02 05:59:52

Vue3中提供了多种方法来获取DOM元素，这使得在Vue3中操作DOM变得更加容易。本文将介绍四种最常用的方法：ref、getElementByID、querySelector、ref和getRef。

ref

ref是最常用的方法之一，它允许您在Vue实例中存储对DOM元素的引用。要使用ref，您需要在组件模板中使用ref属性，并将一个唯一的字符串作为该属性的值。然后，您可以在组件的mounted()钩子函数中使用this.$refs对象来访问该元素。

例如，以下代码演示了如何使用ref来获取DOM元素：

<template>
  <div ref="myElement"></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myElement) // 输出: <div ref="myElement"></div>
  }
}
</script>

getElementByID

getElementByID方法允许您通过其ID来获取DOM元素。要使用getElementByID，您需要在组件的mounted()钩子函数中使用document.getElementById()方法。

例如，以下代码演示了如何使用getElementByID来获取DOM元素：

<template>
  <div id="myElement"></div>
</template>

<script>
export default {
  mounted() {
    const element = document.getElementById('myElement')
    console.log(element) // 输出: <div id="myElement"></div>
  }
}
</script>

querySelector

querySelector方法允许您通过CSS选择器来获取DOM元素。要使用querySelector，您需要在组件的mounted()钩子函数中使用document.querySelector()方法。

例如，以下代码演示了如何使用querySelector来获取DOM元素：

<template>
  <div class="my-element"></div>
</template>

<script>
export default {
  mounted() {
    const element = document.querySelector('.my-element')
    console.log(element) // 输出: <div class="my-element"></div>
  }
}
</script>

ref和getRef

ref和getRef方法是Vue3中引入的新方法，它们允许您在组件模板中获取对DOM元素的引用。要使用ref和getRef，您需要在组件模板中使用ref属性，并将一个唯一的字符串作为该属性的值。然后，您可以在组件的mounted()钩子函数中使用this.refs对象和this.getRef()方法来访问该元素。

例如，以下代码演示了如何使用ref和getRef来获取DOM元素：

<template>
  <div ref="myElement"></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myElement) // 输出: <div ref="myElement"></div>
    console.log(this.$getRef('myElement')) // 输出: <div ref="myElement"></div>
  }
}
</script>