vue3清空form表单

以下是两种Vue3清空表单的方法：

1.使用resetFields()方法

<template>
  <form ref="myForm">
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <button @click="resetForm">重置</button>
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('')
    const age = ref('')
    const myForm = ref(null)

    const resetForm = () => {
      myForm.value.resetFields()
    }

    return {
      name,
      age,
      myForm,
      resetForm
    }
  }
}
</script>

2.使用reset()方法

<template>
  <form ref="myForm">
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <button @click="resetForm">重置</button>
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('')
    const age = ref('')
    const myForm = ref(null)

    const resetForm = () => {
      myForm.value.reset()
    }

    return {
      name,
      age,
      myForm,
      resetForm
    }
  }
}
</script>