vue收集表单数据
<!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>