Vue收集表单数据总结：
- <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
- <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
- <input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked(勾选或未勾选，是bool值)
- 配置input的value属性
- v-model的初始值是非数组，那么收集的就是chekcked(勾选或未勾选，是bool值)
- v-model的初始值是数组，那么收集的就是value组成的数组
注：v-model的三个修饰符
- lazy：失去焦点后再收集数据
- trim：去掉输入信息的首位空格
- number：限制输入框，只能输入数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收集表单数据</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root" style="margin-top: 20px;margin-left: 20px;">
<!-- @submit.prevent 表示阻止默认提交 -->
<form @submit.prevent="methodSubmit">
<!-- 注：v-model,用于控制input的输入value -->
<!-- v-model.trim 去掉前后空格 -->
<!-- text -->
<label for="txtnum">账号：</label>
<input id="txtnum" type="text" v-model.trim="account"><br><br>
<label for="txtpwd">密码：</label>
<input id="txtpwd" type="password" v-model="password"><br><br>
<!-- 限制只能输入数字 注：v-model.number 进行了类型转换，默认字符串 -->
年龄：<input type="number" v-model.number="age"><br><br>
<!-- radio -->
性别：
男<input name="chbsex" type="radio" value="male" v-model="sex">
女<input name="chbsex" type="radio" value="female" v-model="sex"><br><br>
<!-- checkbox -->
爱好：
跑步<input type="checkbox" v-model="hobby" value="study">
踢球<input type="checkbox" v-model="hobby" value="playBall">
游戏<input type="checkbox" v-model="hobby" value="playGame"><br><br>
<!-- select -->
所属校区：
<select style="width: 160px;" v-model="city">
<option value="">请选择小区</option>
<option value="xian">西安</option>
<option value="beijing">北京</option>
<option value="chongqing">重庆</option>
</select><br><br>
<!-- textarea v-model.lazy表示失去焦点后才触发更新-->
其他信息：<textarea v-model.lazy="otherInfo" name="" id="" cols="25" rows="10"></textarea><br><br>
<input type="checkbox" v-model="chbAgree">阅读并接受<a href="">《用户协议》</a><br><br>
<!-- <button @click="methodSubmit">提交</button> -->
<button>提交</button>
</form>
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
account: '',
password: '',
age: 18,
sex: 'male',
hobby: ['study'],
city: 'xian',
otherInfo: '',
chbAgree: true,
},
computed: {
attInfo () {
// return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
methodSubmit () {
// 输出data对应的json
console.log('json==', JSON.stringify(this._data))
alert('提交事件成功！')
},
methodTwo (event, str) {
// alert('事件触发成功！' + str)
},
},
})
</script>
标签：24,Vue,收集,--,value,表单,勾选,model From： https://www.cnblogs.com/YYkun/p/18044437