vue3操作dom元素
时间: 2023-06-21 15:17:14 浏览: 165
vue操作dom元素的3种方法示例
在Vue3中,可以使用`ref`来获取DOM元素的引用,然后通过操作这个引用来修改DOM元素的属性或内容。
例如,在模板中给一个元素添加一个`ref`属性:
```html
<template>
<div>
<p ref="myParagraph">这是一个段落</p>
</div>
</template>
```
然后在组件中可以通过`this.$refs`来访问这个元素的引用,并对其进行操作:
```javascript
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const myParagraph = ref(null)
onMounted(() => {
myParagraph.value.style.color = 'red'
})
return {
myParagraph
}
}
}
</script>
```
在上面的例子中,我们使用`ref`创建了一个名为`myParagraph`的引用,并在组件的`setup`函数中通过`onMounted`钩子函数来对这个元素的样式进行修改。
阅读全文