You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.2 KiB
61 lines
2.2 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>收集表单数据</title> |
|
<script type="text/javascript" src="../vue.js"></script> |
|
</head> |
|
<body> |
|
<div id="root"> |
|
<form @submit.prevent="demo"> |
|
<label for="account">账号：</label> |
|
<input type="text" id="account" v-model.trim="userInfo.account"><br/><br/> |
|
密码：<input type="password" v-model="userInfo.password"><br/><br/> |
|
年龄：<input type="number" v-model.number="userInfo.age"><br/><br/> |
|
性别： |
|
男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> |
|
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/> |
|
爱好： |
|
抽烟<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="smoke"> |
|
喝酒<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="drink"> |
|
烫头<input type="checkbox" name="hooby" v-model="userInfo.hobby" value="hair"><br/><br/> |
|
所属校区： |
|
<select v-model="userInfo.city"> |
|
<option value="">请选择校区</option> |
|
<option value="beijing">北京</option> |
|
<option value="shanghai">上海</option> |
|
<option value="shenzhen">深圳</option> |
|
<option value="wuhan">武汉</option> |
|
</select><br/><br/> |
|
其他信息： |
|
<textarea name="otherInfo" id="" cols="30" rows="5" v-model.lazy="userInfo.other"></textarea><br/><br/> |
|
<input type="checkbox" name="agree" v-model="userInfo.agree">阅读并接受<a |
|
href="http://www.baidu.com">《用户协议》</a> |
|
<button type="submit">提交</button> |
|
</form> |
|
</div> |
|
</body> |
|
<script type="text/javascript"> |
|
Vue.config.productionTip = false |
|
const vm = new Vue({ |
|
el: "#root", |
|
data: { |
|
userInfo: { |
|
account: "", |
|
password: "", |
|
age: 20, |
|
sex: "female", |
|
hobby: [], |
|
city: "", |
|
other: "", |
|
agree: false, |
|
} |
|
}, |
|
methods: { |
|
demo() { |
|
console.log(JSON.stringify(this.userInfo)) |
|
} |
|
} |
|
}) |
|
</script> |
|
</html> |