前言

​​form​​​标签的​​action​​​用于指定表单提交的地址，现在的前后端交互我们一般用不到这个属性，不会真正往一个地址提交数据。​​form​​​只是作为一个元素的呈现，一个结构，我们提交数据使用的是​​ajax​​。

label

添加控件的点击区域。

vue收集表单数据（2022-04-22学习笔记）_前端

单选

​​name​​相同，表示这组单选是一组的，只能选择一个。

vue收集表单数据（2022-04-22学习笔记）_vue.js_02


​​v-model​​​默认获取的是​​value​​的内容。

vue收集表单数据（2022-04-22学习笔记）_表单提交_03

多选

多选也要配置好value值。

vue收集表单数据（2022-04-22学习笔记）_前端_04


绑定的是数组。

vue收集表单数据（2022-04-22学习笔记）_提交数据_05

下拉框

vue收集表单数据（2022-04-22学习笔记）_单选_06


vue收集表单数据（2022-04-22学习笔记）_前端_07

表单提交

表单提交的默认行为就是跳转页面，会刷新一下，我们需要阻止默认行为。

vue收集表单数据（2022-04-22学习笔记）_单选_08

数据传递后端

将vue包装的对象转化成JSON。

vue收集表单数据（2022-04-22学习笔记）_提交数据_09


一般我们将数据打包一下。不是直接用_data。

vue收集表单数据（2022-04-22学习笔记）_vue.js_10

输入框控制只输入数字

vue收集表单数据（2022-04-22学习笔记）_前端_11

去掉首尾空格

vue收集表单数据（2022-04-22学习笔记）_提交数据_12

总结

vue收集表单数据（2022-04-22学习笔记）_vue.js_13