收集表单数据
v-model双向数据绑定,收集的是input框的value,单选按钮不存在value,就像代码中的男女选项,即使绑定性别v-model=“sex”,控制台依然不能接收性别的值,因为没有value值,,想要接收数据需要在单选input框输入value来标记男女,后台会输出value。
多组的勾选框应该把初始数据写成数组,再添加v-model双向绑定hobby,给每个勾选的数据添加value值,最后收集的就是value组成的数组。
因为hobby初始值会影响v-model收集数据,如果不在实例里面你设置hobby为数组,那么无法获取数据指挥显示true和false。
<div id="form"><form @submit.prevent="demo">账号: <input type="text" v-model.trim="userInfo.account"><br /><br />密码:<input type="password" v-model="userInfo.password"><br /><br />性别:男<input type="radio" name="sex" v-model="userInfo.sex" value="male">女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /><br /><br />年龄:<input type="number" v-model.number="userInfo.age"><br /><br />爱好:学习<input type="checkbox" v-model="userInfo.hobby" value="study">打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">开车<input type="checkbox" v-model="userInfo.hobby" value="drive"><br /><br /><br />所属校区:<select v-model="userInfo.city"><option value="">请选择校区</option><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">杭州</option></select><br /><br /><br />其他信息:<textarea v-model.lazy="userInfo.other"></textarea><br /><input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="www.baidu.com">《用户协议》</a><button>提交</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来访问
<script>const 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属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选是true,未勾选为false)
(2)v-model的初始值是数组,那么收集的就是value组成的数组
v-model的三个修饰符:lazy:失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤lazy:失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤