vue3 清空表单数据

在Vue 3中，清空表单数据可以通过以下几种方式实现：

1. 使用`v-model`指令：可以通过将表单元素与Vue实例的数据进行双向绑定，然后在需要清空表单数据的时候，将数据重置为初始值即可。例如：

<template>
  <div>
    <input v-model="name" type="text" />
    <button @click="resetForm">清空</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    resetForm() {
      this.name = '';
    }
  }
};
</script>

2. 使用`ref`引用：在Vue 3中，可以使用`ref`函数创建一个响应式引用，然后将表单元素与引用进行绑定。在需要清空表单数据的时候，可以通过修改引用的值来实现。例如：

<template>
  <div>
    <input :value="name.value" @input="name.value = $event.target.value" type="text" />
    <button @click="resetForm">清空</button>
  </div>
</template>

<script>
import { } from 'vue';

export default {
  setup() {
    const name = ref('');

    const resetForm = () => {
      name.value = '';
    };

    return {
      name,
      resetForm
    };
  }
};
</script>

以上是两种常见的清空表单数据的方式，你可以根据具体情况选择适合你的方式来实现。