目标
- 一小时掌握vue如何收集不同类型表单数据
表单类型
表单收集的信息针对有text
、textarea
,checkbox
,radio
,select
Vue如何收集不同类型表单数据
1、text/textarea类型表单
<p>姓名:<input type="text" v-model="name"></p>
<p>其他信息:
//lazy为是修饰符,当表单域失去焦点再收集数据,提高性能
<textarea placeholder="请输入其他相关信息" v-model.lazy="otherMsg"></textarea>
</p>
<script>
data:{
name: '',
otherMsg: '',
}
</script>
小结:<input type="text">
和<textarea>
中v-model收集的是用户输入的value值。
2、值为number类型的表单
//年龄为number类型
<p>年龄:<input type="number" v-model.number="age"></p>
<script>
data:{
age:'',
}
</script>
小结:如果收集的数据类型必须为number
,那么type=“number”
需要搭配v-model.number
一起使用才能奏效
3、radio类型表单
<p>性别:
//二选一
<input type="radio" v-model="sex" value="male">男<input type="radio" v-model="sex" value="female">女
</p>
<script>
data:{
sex:'',
}
</script>
小结:<input type="radio">
中需要先给单选框配置value值,这样v-model
才能收集到用户是选择了哪个单选框
4、checkbox类型表单
<p>爱好:
//多项选择
<input type="checkbox" v-model="hobby" value="play">玩耍
<input type="checkbox" v-model="hobby" value="eat">吃粮
<input type="checkbox" v-model="hobby" value="drink">喝水
</p>
//单选框
<input type="checkbox" v-model="agree"> 阅读并接受以上协议
<script>
data:{
hobby:[],
}
</script>
小结:(1) <input type="checkbox">
中没有配置value值或者v-model的值为非数组类型,那么收集的是checked(布尔值,勾选或不勾选)
(2)<input type="checkbox">
中配置value值并且v-model的值为数组类型
,那么收集的是value组成的数组
(3)当<input type="checkbox">
为单选框
时,可以不用配置value值,v-model收集的为布尔值
5、select类型表单
<select v-model="city">
<option value="beijing" >北京</option>
<option value="zhengzhou">郑州</option>
<option value="shanghai" >上海</option>
</select>
<script>
data:{
city:''
}
</script>
小结:<select>
类型表单,v-model要收集数据,必须要给每个option配置value值,这样v-model收集的为用户选择的value值
v-model的三个修饰符
1、number
:将用户输入的字符串转化为number类型数据
2、lazy
:失去焦点再收集数据(提高运行效率)
3、trim
:去掉首尾空格
总结(小练习)
提示:好记性不如烂笔头,一定要练习哦
<body>
<div id="app">
<p>姓名:<input type="text" v-model="name"></p>
<p>年龄:
<input type="number" v-model="age"></p>
<p>性别:
<input type="radio" v-model="sex" value="male">男<input type="radio" v-model="sex" value="female">女</p>
<p>爱好:
<input type="checkbox" v-model="hobby" value="play">玩耍<input type="checkbox" v-model="hobby" value="eat">吃粮<input type="checkbox" v-model="hobby" value="drink">喝水</p>
<p>所属校区:
<select v-model="city">
<option value="beijing" >北京</option>
<option value="zhengzhou">郑州</option>
<option value="shanghai" >上海</option>
</select></p>
<p>其他信息:
<textarea placeholder="请输入其他相关信息" v-model="otherMsg"></textarea>
</p>
<input type="checkbox" v-model="agree"> 阅读并接受以上协议
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
name: '',
age: '',
sex: '',
hobby: [],
hobby1: '',
city: '',
otherMsg: '',
agree: ''
},
})
</script>
</body>
以上代码运行结果: