<input type="text">，v-model收集的是value值，用户输入的就是value值；<input type="radio">，v-model收集的是value值，且要给标签配置value属性；<input type="checkbox">（1）如果没有配置input的value属性，那么收集的是
checked（勾选/未勾选，布尔值）；（2）配置了input的value属性：
a.
v-model的初始值是非数组，那么收集的是checked（勾选/未勾选，布尔值）； b. 反之，初始值是数组，那么收集的就是value组成的数组
注：
v-model的三个修饰符：lazy：失去焦点再收集数据；
number：输入字符串转为有效的数字；
trim：输入首尾空格过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit="demo">
<!-- <label for="demo">账号：</label> -->
<!-- <input type="text" id="demo"> -->
账号：<input type="text" v-model.trim="userInfo.account">
<br><br>
密码：<input type="password" v-model="userInfo.password">
<br><br>
性别：
男<input type="radio" name="sex" value="male" v-model="userInfo.sex">
女<input type="radio" name="sex" value="female" v-model="userInfo.sex">
<br><br>
年龄：<input type="number" name="age" v-model.number="userInfo.age">
<br><br>
爱好：
<input type="checkbox" value="eat" v-model="userInfo.hobby">吃饭
<input type="checkbox" value="sleep" v-model="userInfo.hobby">睡觉
<input type="checkbox" value="play" v-model="userInfo.hobby">打豆豆
<br><br>
所属校区：
<select v-model="userInfo.city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br><br>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea>
<br><br>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
<br>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
sex: 'male',
age: '',
hobby: [],
city: '',
other: '',
agree: ''
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo))
alert('提交成功')
}
}
})
</script>
</body>
</html>
评论 (0)