vue3.0 javascript 清空表单

在 Vue3 中，清空表单数据通常有两种方法：

1. **直接操作实例的数据**：
如果你直接在模板中绑定到组件的数据，你可以使用 `this` 关键字访问该数据，并将其设置为初始值或者空对象。例如，如果你有一个名为 `form` 的对象存储表单字段，可以这样做：

   <template>
     <button @click="clearForm">清空表单</button>
     <input v-model="form.fieldName" />
   </template>

   <script>
   export default {
     data() {
       return {
         form: { fieldName: '' } // 或者清空为 {}
       }
     },
     methods: {
       clearForm() {
         this.form = {}; // 或者 this.form(fieldName) = ''
       }
     }
   }
   </script>

2. **利用 Vue 的 `v-model` 的特性**：
如果你使用了 `v-model` 指令并且表单元素支持 `value` 属性，可以直接清除其绑定值：

   <input type="text" :value="form.fieldName" @blur="clearField" />

   methods: {
     clearField() {
       this.form.fieldName = '';
     }
   }

这里，当用户失去焦点（`@blur` 事件触发）时，`clearField` 方法会把 `fieldName` 的值设为空。