Vue 表单数据收集
文本框
示例：
账号：<input type="text" v-model.trmi="userInfo.account">
密码：<input type="password" v-model="userInfo.password">
签名：<textarea v-model.lazy="userInfo.other"></textarea>
年龄：<input type="number" v-model.number="userInfo.age">
v-model.trmi：过滤掉内容左右两边的的空格，但内容中的空格没法过滤
v-model.lazy：失去焦点再收集数据
v-model.number：输入字符串转为有效的数字
单选框
示例
性别：
男<input type="radio" v-model="userInfo.sex" name="sex" value="男">
女<input type="radio" v-model="userInfo.sex" name="sex" value="女">
同一类型的单选框需要设置同一个 name 如：name="sex"
需要为每一个单选框设置 value 值才能收集到数据
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
这里未设置 value 值，收集 checked（勾选 or 未勾选，是布尔值）
多选框与下拉框
多选框示例
爱好：
吃饭<input type="checkbox" v-model="userInfo.hobby" value="吃饭">
睡觉<input type="checkbox" v-model="userInfo.hobby" value="睡觉">
喝水<input type="checkbox" v-model="userInfo.hobby" value="喝水">
下拉框示例
<select v-model="userInfo.city">
<option value="">请选择地区</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
需要每一项设置 value 值
实例
<!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.prevent="demo">
账号：<input type="text" v-model.trmi="userInfo.account">
<br><br>
密码：<input type="password" v-model="userInfo.password">
<br><br>
性别：
男<input type="radio" v-model="userInfo.sex" name="sex" value="男">
女<input type="radio" v-model="userInfo.sex" name="sex" value="女">
<br><br>
年龄：<input type="number" v-model.number="userInfo.age">
<br><br>
爱好：
吃饭<input type="checkbox" v-model="userInfo.hobby" value="吃饭">
睡觉<input type="checkbox" v-model="userInfo.hobby" value="睡觉">
喝水<input type="checkbox" v-model="userInfo.hobby" value="喝水">
<br><br>
所在地区：
<select v-model="userInfo.city">
<option value="">请选择地区</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select>
<br><br>
签名：
<textarea v-model.lazy="userInfo.other"></textarea>
<br><br>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
<br><br>
<button>提交</button>
</form>
</div>
</body>
<script>
new Vue({
el: "#root",
data: {
userInfo: {
account: '',
password: '',
sex: 'male',
age: '',
hobby: [],
city: '',
other: '',
agree: false
}
},
methods: {
demo() {
alert('提交成功')
console.log(JSON.stringify((this.userInfo)))
}
}
})
</script>
</html>
