Vue2.0学习— 收集表单数据（四十三）
Posted 王同学要努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0学习— 收集表单数据（四十三）相关的知识，希望对你有一定的参考价值。
【Vue2.0学习】— 收集表单数据（四十三）
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>
以上是关于Vue2.0学习— 收集表单数据（四十三）的主要内容，如果未能解决你的问题，请参考以下文章