收集表单数据
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:输入首尾空格过滤