vue怎么接收表单数据

vue.js 提供了多种接收表单数据的方式：v-model：自动将输入框值绑定到数据属性；表单提交事件：监听提交事件获取表单数据；refs：直接访问 dom 元素获取值。选择合适的方法取决于表单数据的复杂度和所需的处理方式。

如何在 Vue.js 中接收表单数据

Vue.js 提供了多种方式来接收表单数据，本文将介绍最常用的方法：

1. v-model

v-model 是一个指令，它可以自动将 元素的值绑定到 Vue 实例的数据属性。当用户输入表单时，v-model 会自动更新数据。

立即学习“前端免费学习笔记（深入）”；

2. 表单提交事件

当表单提交时，Vue.js 会触发一个 submit 事件。我们可以监听这个事件来获取表单数据。

提交<script>export default { methods: { submitForm(event) { event.preventDefault(); const formData = new FormData(event.target); console.log(formData); } }}</script>

3. refs

refs 允许我们在 Vue 实例中直接访问 DOM 元素。我们可以使用 ref 来获取表单元素，然后手动获取其值。

提交<script>export default { mounted() { this.$refs.form.addEventListener('submit', this.submitForm); }, methods: { submitForm(event) { event.preventDefault(); const formData = new FormData(this.$refs.form); console.log(formData); } }}</script>

选择合适的方法

这三种方法各有其优点和缺点：

根据具体情况，选择最合适的方法来接收表单数据。