v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
<body> <div id="root"> <form @submit.prevent="demo"> <!-- 去掉前后空格trim --> 账号：<input type="text" v-model.trim="userinfo.account"> <br> 密码： <input type="password" v-model="userinfo.password"><br> 年龄： <input type="number" v-model.number="userinfo.age"> <br>性别： <input type="radio" name="sex" checked v-model="userinfo.sex" value="male">男 <input type="radio" name="sex" v-model="userinfo.sex" value="female">女 <br>爱好: <input type="checkbox" v-model="userinfo.hobby" value="smoke">抽烟 <input type="checkbox" v-model="userinfo.hobby" value="drink">喝酒 <input type="checkbox" v-model="userinfo.hobby" value="hair">烫头 <br> 所属校区： <select name="school" id=""> <option value="北京" name="北京">--请选择校区--</option> <option value="北京" name="北京">北京</option> <option value="上海">上海</option> <option value="天津">天津</option> </select> <br> 其他信息: <textarea v-model.lazy="userinfo.other"> </textarea> <br> <input type="checkbox" v-model="userinfo.agree"> 阅读并接受阅读协议： <a href="http://www.baidu.com">《用户协议》</a> <br> <button>提交</button> </form> </div> <script> const vm = new Vue({ el: '#root', data: { userinfo: { account: '', password: '', hobby: [], age: '', sex: 'felmal', city: '北京', other: '', agree: '' } }, methods: { demo() { console.log(JSON.stringify(this.userinfo)); } } }) </script> </body>
