vue3中如何获取dom
时间: 2024-03-21 17:32:40 浏览: 33
在 Vue 3 中,可以使用 `ref` 和 `setup` 函数来获取 DOM 元素。
1. 使用 `ref` 创建 DOM 引用:
```html
<template>
<div ref="myDiv">Hello world!</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const myDiv = ref(null);
return {
myDiv
};
}
}
</script>
```
在模板中使用 `ref` 创建了一个名为 `myDiv` 的引用,然后在 `setup` 函数中使用 `ref` 创建了一个名为 `myDiv` 的变量,并将其返回。这样,我们就可以在 `setup` 函数中使用 `myDiv` 变量来访问 `myDiv` DOM 元素。
2. 在 `setup` 函数中使用 `onMounted` 钩子来访问 DOM 元素:
```html
<template>
<div ref="myDiv">Hello world!</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myDiv = ref(null);
onMounted(() => {
console.log(myDiv.value); // 访问 DOM 元素
});
return {
myDiv
};
}
}
</script>
```
在 `setup` 函数中使用 `onMounted` 钩子来访问 `myDiv` DOM 元素。在 `onMounted` 钩子中,我们可以使用 `myDiv.value` 访问 `myDiv` DOM 元素。