Vue收集表单数据学习笔记

收集表单数据

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：输入首尾空格过滤