目录
功能介绍
想在一个表单里做一些小功能实现用户数据收集，收集完毕之后在控制台打印这些信息即可。
包含账号 ，密码（加密）， 性别， 年龄（1-120）， 爱好，多选。喜欢的城市。其他信息。阅读并接受用户协议，提交。
效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
body {
margin: 10px;
}
</style>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="account">
<br />
<br />
密码：<input type="password" v-model="password">
<br />
<br />
性别：
男<input type="radio" name="sexRadio" value="male" v-model="sex">
女<input type="radio" name="sexRadio" value="female" v-model="sex">
<br />
<br />
年龄: <input type="number" v-model.number="age" min="1" v-on:input="checkAge">
<br />
<br />
爱好：
学习<input type="checkbox" v-model="hobby" value="study">
看电视<input type="checkbox" v-model="hobby" value="game">
运动<input type="checkbox" v-model="hobby" value="sports">
<br />
<br />
喜欢的城市：
<select v-model="city">
<option value="">请选择喜欢的城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
<option value="chengdu">成都</option>
</select>
<br />
<br />
其他信息：
<textarea v-model="otherInfo"></textarea>
<br />
<br />
<input type="checkbox" v-model="isAgree">
阅读并接受用户协议<a href="https://www.baidu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
account: '',
password: '',
sex: null,
hobby: [],
city: '',
otherInfo: '',
isAgree: '',
age: null
},
methods: {
demo() {
console.log(JSON.stringify(this._data))
},
checkAge() {
this.age = parseInt(this.age)
if (!Number.isInteger(this.age)) {
this.age = null
}
if(this.age < 1 || this.age>120){
this.age = null
}
}
}
})
</script>
</html>