vue3怎么绑定dom
时间: 2023-09-23 08:10:21 浏览: 55
在 Vue 3 中,可以使用 `ref` 函数来绑定 DOM 元素。`ref` 函数会创建一个响应式的引用(reference),并将其绑定到指定的 DOM 元素上。这个引用可以被用于访问 DOM 元素,也可以被传递给子组件。
下面是一个简单的例子:
```html
<template>
<div>
<p ref="myParagraph">这是一段文本。</p>
<button @click="changeText">改变文本</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 创建一个响应式引用,并将其绑定到 p 元素上
const myParagraph = ref(null);
const changeText = () => {
// 修改 p 元素的文本内容
myParagraph.value.textContent = '文本已改变!';
};
return {
myParagraph,
changeText,
};
},
};
</script>
```
在上面的例子中,我们使用 `ref` 函数将一个响应式的引用绑定到了一个 `<p>` 元素上。我们可以通过访问 `myParagraph.value` 来获取这个 DOM 元素。在 `changeText` 函数中,我们修改了这个元素的文本内容。