县市区没有建设信用网站和平台,外贸网站都有那些,怎样优化网站 优帮云,上海建站网络公司收集表单数据
v-model双向数据绑定#xff0c;收集的是input框的value#xff0c;单选按钮不存在value#xff0c;就像代码中的男女选项#xff0c;即使绑定性别v-model“sex”#xff0c;控制台依然不能接收性别的值#xff0c;因为没有value值#xff0c;#xff0c…收集表单数据
v-model双向数据绑定收集的是input框的value单选按钮不存在value就像代码中的男女选项即使绑定性别v-model“sex”控制台依然不能接收性别的值因为没有value值想要接收数据需要在单选input框输入value来标记男女后台会输出value。
多组的勾选框应该把初始数据写成数组再添加v-model双向绑定hobby给每个勾选的数据添加value值最后收集的就是value组成的数组。
因为hobby初始值会影响v-model收集数据,如果不在实例里面你设置hobby为数组那么无法获取数据指挥显示true和false。
div idformform submit.preventdemo账号 input typetext v-model.trimuserInfo.accountbr /br /密码input typepassword v-modeluserInfo.passwordbr /br /性别男input typeradio namesex v-modeluserInfo.sex valuemale女input typeradio namesex v-modeluserInfo.sex valuefemalebr /br /br /年龄input typenumber v-model.numberuserInfo.agebr /br /爱好学习input typecheckbox v-modeluserInfo.hobby valuestudy打游戏input typecheckbox v-modeluserInfo.hobby valuegame开车input typecheckbox v-modeluserInfo.hobby valuedrivebr /br /br /所属校区select v-modeluserInfo.cityoption value请选择校区/optionoption value北京/optionoption value上海/optionoption value广州/optionoption value杭州/option/selectbr /br /br /其他信息textarea v-model.lazyuserInfo.other/textareabr /input typecheckbox v-modeluserInfo.agree 阅读并接受a hrefwww.baidu.com《用户协议》/abutton提交/button/form/div所属校区v-model:,通过指定data里面city值来设置默认值。 接受协议里面只是勾选不需要value设置v-model就可以。
提交表单默认跳转事件(.prevent阻止默认行为)表单提交设置form的submit的demo事件,data里面写demo
可以通过console.log(this._data)来输出页面中的数据但是一般不在代码中直接操作_data,所以将data所有数据包裹在userInfo里面页面中所有v-model都要添加userInfo来访问
scriptconst vm new Vue({el: #form,data: {userInfo: {account: ,password: ,sex: female,age: ,hobby: [],city: beijing,other: ,agree: }},methods: {demo() {// console.log(this._data)// alert(1)console.log(JSON.stringify(this.userInfo))}}})/script总结
收集数据表单 若则v-model收集的是value值用户输入的就是value值。 若则v-model收集的是value值且要给标签配置value值。 若 1. 没有配置input的value值那么收集的就是checked勾选是true未勾选为false 2. 配置input的value属性 1v-model的初始值是非数组那么收集的就是checked勾选是true未勾选为false 2v-model的初始值是数组那么收集的就是value组成的数组
v-model的三个修饰符lazy失去焦点再收集数据number输入字符串转为有效的数字trim输入首尾空格过滤lazy失去焦点再收集数据number输入字符串转为有效的数字trim输入首尾空格过滤
