Vue.js 是一种流行的前端框架，用于构建用户界面和单页面应用程序。在处理表单数据时，Vue 提供了多种方式来接收和操作表单数据。以下将详细介绍如何在 Vue 中接收表单数据。
使用 `v-model`
最简单的方式是使用 `v-model` 指令在表单的输入元素上创建双向数据绑定。`v-model` 会自动将输入框的值与 Vue 实例中的数据属性同步。
在这个例子中，每个输入框的值都会绑定到 `formData.users` 数组的对应位置。
表单提交
在提交表单时，通常需要将数据发送到后端服务。可以使用 `axios` 或其他 HTTP 客户端库来发送数据。
methods: {
submitForm() {
// 验证数据...
// 发送数据到后端
axios.post('/api/submit', this.formData)
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
}
}
防止默认提交行为
如果使用 HTML 表单的 `action` 属性和 `method` 属性提交表单，需要阻止默认的提交行为，因为 Vue 是通过 JavaScript 来处理表单提交的。
在这个例子中，`@submit.prevent` 阻止了表单的默认提交行为，并调用 `submitForm` 方法。
通过以上几种方法，Vue.js 可以优雅地接收和操作表单数据，为构建复杂的前端应用提供了强大的支持。