收集表单数据:
- 若:<input type="text"/>,则v-model收集的是value值,用户输入的内容就是value值
- 若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value属性
- 若:<input type="checkbox"/>
- 没有配置value属性,那么收集的是checked属性(勾选 or 未勾选,是布尔值)
- 配置了value属性:
- v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
- v-model的初始值是数组,那么收集的就是value组成的数组
v-model的三个修饰符:
- lazy:失去焦点后再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="demo">
账号:<input type="text" v-model.trim="userInfo.account"><br></br>
密码:<input type="password" v-model.trim="userInfo.password"><br></br>
年龄:<input type="number" v-model.number="userInfo.age"><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>
爱好:
学习:<input type="checkbox" v-model="userInfo.hobby" value="learn">
打游戏:<input type="checkbox" v-model="userInfo.hobby" value="play">
吃饭:<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br></br>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijin">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br></br>
其他信息:
<textarea v-model.lazy="userInfo.other"></textarea>
<br></br>
<input type="checkbox" v-model="userInfo.agree">
阅读并接受
<a href="https://www.baidu.com">《用户协议》</a>
<button type="submit">提交</button>
<br></br>
</form>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
userInfo: {
account: '',
password: '',
age: '',
sex: 'male',
hobby: [],
city: 'beijin',
other: '',
agree: ''
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</body>
</html>