vue收集表單資料
阿新 • • 發佈：2021-12-11
<!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>