vue.js 提供了多种接收表单数据的方式：v-model：自动将输入框值绑定到数据属性；表单提交事件：监听提交事件获取表单数据；refs：直接访问 dom 元素获取值。选择合适的方法取决于表单数据的复杂度和所需的处理方式。
如何在 Vue.js 中接收表单数据
Vue.js 提供了多种方式来接收表单数据，本文将介绍最常用的方法：
1. v-model
v-model 是一个指令，它可以自动将 元素的值绑定到 Vue 实例的数据属性。当用户输入表单时，v-model 会自动更新数据。
立即学习“前端免费学习笔记（深入）”；
<code class="html"><input v-model="formData.username" type="text" placeholder="Username" /></code>
2. 表单提交事件
SSP网店系统单用户免费普及版
下载
前后台订单管理页添加商品缩图显示 后台系统设置可直接对商品缩图大小进行设置 去掉商品图片水印功能 上传一张图片,可同时生成列表页缩图及商品详细页缩图,以不同的大小满足页面不同的需要 商品收藏添加批量删除功能 修改商品详细页会员等级显示BUG 优化缩图生成功能(注:因此次优化已更换上传内核,所以有可能会影响已上传商品图片数据) 加入简繁转换 前台订单管理添加单订单在线支付功能 修正VS081样式前台
当表单提交时，Vue.js 会触发一个 submit 事件。我们可以监听这个事件来获取表单数据。
<code class="js"><form @submit="submitForm">
<!-- 表单输入 -->
<button type="submit">提交</button>
</form>
<script>
export default {
methods: {
submitForm(event) {
event.preventDefault();
const formData = new FormData(event.target);
console.log(formData);
}
}
}
</script></code>3. refs
refs 允许我们在 Vue 实例中直接访问 DOM 元素。我们可以使用 ref 来获取表单元素，然后手动获取其值。
<code class="js"><form>
<!-- 表单输入 -->
<button type="button" @click="submitForm">提交</button>
</form>
<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></code>选择合适的方法
这三种方法各有其优点和缺点：
- v-model 简单易用，适用于处理简单的表单数据。
- 表单提交事件 允许对表单数据进行验证和处理后再提交。
- refs 更加灵活，可以控制访问 DOM 元素的时机。
根据具体情况，选择最合适的方法来接收表单数据。
