vue3 如何使用querySelector
时间: 2024-03-23 08:35:18 浏览: 47
在Vue 3中,可以使用querySelector来选择DOM元素。Vue 3提供了两种方式来使用querySelector:
1. 在模板中使用:可以在模板中使用`ref`指令来获取DOM元素的引用,然后使用`$refs`来访问该引用。例如:
```html
<template>
<div ref="myElement">Hello Vue 3!</div>
</template>
<script>
export default {
mounted() {
const element = this.$refs.myElement;
const selectedElement = element.querySelector('.my-class');
// 使用selectedElement进行操作
}
}
</script>
```
在上面的例子中,我们使用`ref`指令给`<div>`元素添加了一个引用名为`myElement`,然后在`mounted`钩子函数中通过`this.$refs.myElement`获取到该元素的引用,并使用`querySelector`选择了一个类名为`my-class`的子元素。
2. 在组件中使用:可以使用`setup`函数来获取DOM元素的引用,并将其返回给模板中使用。例如:
```html
<template>
<div ref="myElement">Hello Vue 3!</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myElement = ref(null);
onMounted(() => {
const selectedElement = myElement.value.querySelector('.my-class');
// 使用selectedElement进行操作
});
return {
myElement
};
}
}
</script>
```
在上面的例子中,我们使用`ref`函数创建了一个响应式引用`myElement`,然后在`onMounted`钩子函数中通过`myElement.value`获取到该元素的引用,并使用`querySelector`选择了一个类名为`my-class`的子元素。最后,我们将`myElement`返回给模板中使用。