提示:该文章为笔者的个人笔记并不是权威,如有错误,谢谢指出。
收集表单数据
<div id="root">
<form @submit.prevent="demo">
账号:<input type="text" v-model="account"><br>
密码:<input type="password" v-model="password"><br>
年龄:<input type="number" v-model.number="age"><br>
性别:<br>
男:<input type="radio" name="sex" v-model="sex" value="female"><br>
女:<input type="radio" name="sex" v-model="sex" value="male"><br>
爱好:
抽烟<input type="checkbox" v-model="hobby" value="chouyan"><br>
喝酒<input type="checkbox" v-model="hobby" value="hejiu"><br>
烫头<input type="checkbox" v-model="hobby" value="tangtou"><br>
所在地区:
<select v-model="city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="fujian">福建</option>
<option value="guangdong">广东</option>
</select>
其他信息:
<textarea name="" id="" cols="8" rows="3" v-model.lazy.trim="news"></textarea>
<input type="checkbox" v-model="read">阅读并接受<a href="javascript:;">《用户协议》</a>
<button>提交</button>
<form>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
account: '',
password: '',
age: '',
sex: 'female',
hobby: [],
city: 'beijing',
news: '',
read: '',
}
},
methods: {
demo() {
console.log(this._data)
}
}
})
</script>
总结
- 若<input type="text">, 则v-model收集的是value值。用户输入的值就是value值。
- 若<input type="radio">,则v-model收集的是value值,要给标签配置value值
- 若<input type="checkbox">
- 没有配置input的value属性,那么收集的就是checkbox(勾选 或者 未勾选 ,是布尔值)
- 配置input的value值
- v-model的初始值是非数组,那么收集的是checkbox(勾选 或者 未勾选 ,是布尔值)
- v-model的初始值是数组,那么收集的是value组成的数组
- 备注:v-model的三个修饰符
- lazy:失去焦点在收集数据
- number: 输入字符串转为数值类型
- trim:输入首尾空格过滤