<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.a {
width: 100px;
height: 100px;
}
.b {
background-color: red;
}
</style>
<body>
<!--
vue收集表单数据
-->
<div id="app">
<form action="www.baidu.com" method="get">
<label for="account">账号:</label><!--label可以根据id绑定输入框，当label标签体中的文字被点击后，焦点会集中在所绑定的输入框-->
<input v-model="account" id="account" type="text"><br><br><!--正常用v-model绑定即可，可不写name值-->
<label for="password">密码:</label>
<input v-model="password" type="password" id="password"><br><br><!--正常用v-model绑定即可，可不写name值-->
性别：<br><br>
<label for="male">男</label>
<input v-model="sex" type="radio" id="male" name="sex" value="male"><!--用v-model绑定即可，name需要绑定单选组，value是选中后需要传的值-->
<label for="female">女</label>
<input v-model="sex" type="radio" name="sex" id="female" value="female"><br><br><!--用v-model绑定即可，name需要绑定单选组，value是选中后需要传的值-->
爱好：<br><br>
<label for="hobby">抽烟</label>
<input v-model="hobby" type="checkbox" id="hobby" name="hobby" value="chouyan"><!--name是需要绑定多选的组，value是选中后需要传的值，注意data中需要用数组接收-->
<label for="hejiu">喝酒</label>
<input v-model="hobby" name="hobby" id="hejiu" type="checkbox" value="hejiu"><!--name是需要绑定多选的组，value是选中后需要传的值，注意data中需要用数组接收-->
<label for="tangtou">烫头</label>
<input v-model="hobby" name="hobby" id="tangtou" type="checkbox" value="tangtou"><br><br><!--name是需要绑定多选的组，value是选中后需要传的值，注意data中需要用数组接收-->
<label for="campus">所属校区</label>
<select v-model="campus" id="campus" name="campus"><!--正常用v-model绑定即可，但是要注意option中需要指定value，传参时就会将value的值作为参数的值带过去-->
<option value="dnogfang">东方</option>
<option value="nanfan">南方</option>
<option value="xifang">西方</option>
<option value="beifang">北方</option>
</select>
<br><br>
<textarea v-model="desc" name="desc"></textarea><br><br><!--正常绑定-->
<!--类似于这种，直接可以不指定value，在不指定value的情况下，vue会默认寻找checked，如果选中情况下会存true-->
<input v-model="agreement" type="checkbox" value="yes">阅读并接受<a href="www.baidu.com">《用户协议》</a><br><br>
<button type="submit">提交</button>
</form>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
account: "",
password: "",
sex: "",
hobby: [],
campus: "",
agreement: "",
desc: ""
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号