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元素内容重置为'这是重置后的内容'。