<!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">
<h2>表单信息</h2>
<!--表单Form-->
<form>
<label for="account">账号：</label>
<input type="text" id="account" placeholder="请输入账号信息" v-model="accountData"><br/><br/>
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码" v-model="passwordData"><br/><br/>
<lable>性别：</lable>
<!--男<input type="radio" name="sex" value="male" checked="checked">-->
男<input type="radio" name="sex" v-model="sex" value="male">
女<input type="radio" name="sex" v-model="sex" value="female"><br/><br/>
<lable>爱好：</lable>
学习<input type="checkbox" v-model="hobby" value="study">
运动<input type="checkbox" v-model="hobby" value="motion">
打游戏<input type="checkbox" v-model="hobby" value="game"><br/><br/>
<lable>所属校区</lable>
<select v-model="city">
<option value="">请选择所属校区</option>
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br/><br/>
<lable for="notes">其它信息：</lable>
<textarea id="notes" rows="8" v-model="other"></textarea><br/><br/>
<input type="checkbox">
<lable>阅读并接受</lable><a href="http://www.baidu.com">《用户协议》</a><br/><br/>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
accountData:"",
passwordData:"",
// 单选框，默认选择male
sex:"male",
hobby:[],
city:"",
other:""
}
}
})
</script>
</body>
</html>