湖南建设监理官方网站,福建微网站建设公司,网站建设技术网站建,Divi wordpress 下载收集表单数据
使用vue中的v-model收集表单里面的数据#xff0c;不同的表单元素配合v-model会有不同的写法和技巧 本次的表单元素包括#xff1a;文本框#xff0c;单选#xff0c;多选#xff0c;下拉框#xff0c;文本域
编写表单元素
首先编写表单元素#xff0c;…收集表单数据
使用vue中的v-model收集表单里面的数据不同的表单元素配合v-model会有不同的写法和技巧 本次的表单元素包括文本框单选多选下拉框文本域
编写表单元素
首先编写表单元素包括文本框单选多选下拉框文本域
input输入框细节
这里有一个细节(小技巧)表单编写input输入框的时候通常会配合label标签使用并加上相关的css或或者js这样会让界面更加美观用户体验更好但是今天主要讲的是v-model获取不同的元素数据就不在代码里面增加复杂的代码了大家知道就好我在下面简单演示下加不加的区别
不加上lable 页面的交互性很差必须自己点击输入框才能获取到光标 加上lable 查看页面点击账号会跳进对应的输入框并获取光标 继续编写表单元素 查看页面 表单元素到此就写完了接下来就要把表单交给vue管理并收集数据了
text输入框和password输入框
这两个比较简单定义两个变量绑定在输入框里面 radio单选按钮
接下来就是性别也就是radio单选按钮多个单选按钮但是只能选中一个单选按钮
错误示例
如果直接简单粗暴的定义变量使用v-model绑定单选框是不行的 页面上获取不到选中的值为什么会这样的因为v-model默认收集的是输入框的value,但是目前单选框是没有value的所以获取不到 正确示例
给单选按钮赋值value属性即可注意value不要重复 如果想要某一个单元按钮默认选中可以在属性赋默认值 男默认选中 checkbox多选框
错误示例
和单选框一样不能直接定义属性使用v-model 可以看到收集到的是一个布尔值 这个错误和单元框一致也是没value造成的至于为什么是布尔值vue获取的是这一组复选框里面的checked所以只要选中了就是true不然就是false
那么给复选框赋上value再试试 发现还是不行 哎为什么给复选框配置了value属性还是不行呢
因为复选框的初始值能够影响到收集到的数据如果把复选框的属性错误的写成了字符串那么就算配置了value值也不行
正确示例
注意如果需要获取复选框的值可以使用这种写法如果只需要判断是否被选中也就是true或false可以参考下面的另外一种使用方式
多组复选框属性应该写成一个数组 这样就好了 select下拉框
select下拉框就比较正常了和正常的输入框是一样的 如果想要上来就默认选中也是和单选框一样的 textarea多行输入框
textarea多行输入框本质来说也是输入框写法和正常文本框是一样的
