vue3 通过 绑定 ref 重置 DOM

在Vue 3中，可以使用ref来创建一个对DOM元素的引用，然后通过访问这个引用来操作DOM。如果你想要通过绑定ref来重置DOM元素，你可以在组件的setup函数中使用ref函数从vue包导入，并在模板中使用ref属性绑定DOM元素。

以下是一个简单的例子，展示了如何通过ref来重置DOM元素的内容：

<template><div><button @click="resetContent">重置内容</button><div ref="myDiv">这是一些初始内容</div></div>
</template><script>
import { ref } from 'vue';export default {setup() {const myDiv = ref(null);function resetContent() {if (myDiv.value) {myDiv.value.innerHTML = '这是重置后的内容';}}return {myDiv,resetContent};}
};
</script>

在这个例子中，我们创建了一个<div>元素，并通过ref="myDiv"为它绑定了一个引用。在setup函数中，我们定义了一个名为resetContent的方法，当按钮被点击时，这个方法会被调用，并将myDiv引用的DOM元素内容重置为'这是重置后的内容'。