2021-7-6 VUE的簡易表單提交
阿新 • • 發佈：2021-07-08
<!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> div{ margin: 30px; } .mulitStyle{ height:auto; } </style> </head> <body> <div id="app"> <form action="https://www.baidu.com"View Code> <div> <label>姓名</label><input type="text" name="" v-model="uname"> </div> <div> <label>性別</label> <input type="radio" value="1" v-model="gender"><label>男</label> <input type="radio"value="2" v-model="gender"><label>女</label> </div> <div> <label>興趣愛好</label> <input type="checkbox" name="" value="游泳" v-model="aihao">游泳 <input type="checkbox" name="" value="打球" v-model="aihao">打球 <inputtype="checkbox" name="" value="音樂" v-model="aihao">音樂 <input type="checkbox" name="" value="電影" v-model="aihao">電影 </div> <div class="mulitStyle"> <label>課程</label> <select v-model="kecheng" class="mulitStyle" multiple> <option value="1">語文</option> <option value="2">數學</option> <option value="3">英語</option> <option value="4">體育</option> </select> </div> <div> <label>簡介</label> <textarea> </textarea> </div> <div><input type="submit" name="" @click.prevent="handle"></div> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> //在原生js中使用 var obj={ }; new Vue({ el: '#app', data: { uname:'張三', gender:2, aihao:["游泳","打球"], kecheng:[] }, methods:{ handle:function(){ console.log(this.uname); console.log(this.gender); console.log(this.aihao); console.log(this.kecheng); } } }) </script> </body> </html>