当前位置：首页 > VUE

vue重置按钮怎样实现

2026-01-20 09:49:44VUE

实现 Vue 重置按钮的方法

在 Vue 中实现重置按钮功能，可以通过以下方式操作表单数据或表单元素。

方法一：使用 v-model 绑定表单数据

通过将表单数据绑定到 v-model，并在点击重置按钮时手动重置数据。

<template>
  <form>
    <input v-model="formData.name" placeholder="姓名" />
    <input v-model="formData.email" placeholder="邮箱" />
    <button type="button" @click="resetForm">重置</button>
  </form>
</template>

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

方法二：使用原生 HTML reset 按钮

如果使用的是原生 HTML 表单，可以直接使用 type="reset" 的按钮。

<template>
  <form>
    <input name="name" placeholder="姓名" />
    <input name="email" placeholder="邮箱" />
    <button type="reset">重置</button>
  </form>
</template>

方法三：结合 ref 重置表单

通过 ref 获取表单元素并调用其 reset 方法。

<template>
  <form ref="myForm">
    <input name="name" placeholder="姓名" />
    <input name="email" placeholder="邮箱" />
    <button type="button" @click="resetForm">重置</button>
  </form>
</template>

<script>
export default {
  methods: {
    resetForm() {
      this.$refs.myForm.reset();
    },
  },
};
</script>

方法四：使用第三方表单库（如 VeeValidate）

如果使用 VeeValidate 或其他表单验证库，可以调用其提供的重置方法。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="name" placeholder="姓名" />
    <input v-model="email" placeholder="邮箱" />
    <button type="button" @click="resetForm">重置</button>
  </form>
</template>

<script>
import { useForm } from 'vee-validate';

export default {
  setup() {
    const { resetForm } = useForm();

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