vue.js v-model双向数据绑定, vue.js form表单数据绑定
================================
©Copyright 蕃薯耀 2018年11月29日
http://fanshuyao.iteye.com/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue form表单</title> </head> <body> <div id="vueDiv"> <form> <div> 姓名:<input type="text" id="userName" name="userName" v-model="userName"/> </div> <div> 年龄:<input type="text" id="userAge" name="userAge" v-model="userAge"/> </div> <div> 性别: <input type="radio" name="userSex" value="m" v-model="userSex"/>男 <input type="radio" name="userSex" value="f" v-model="userSex"/>女 </div> <div> 兴趣: <input type="checkbox" name="hobby" value="看电影" v-model="hobby"/>看电影 <input type="checkbox" name="hobby" value="逛街购物" v-model="hobby"/>逛街购物 <input type="checkbox" name="hobby" value="运动" v-model="hobby"/>运动 <input type="checkbox" name="hobby" value="看书" v-model="hobby"/>看书 </div> <div> 班级: <select name="level" v-model="level"> <option value="">请选择…</option> <option value="1">一年级</option> <option value="2">二年级</option> <option value="3">三年级</option> </select> </div> <div> 描述: <textarea rows="3" cols="20" name="desc" v-model="desc"></textarea> </div> </form> <input type="button" id="btnSubmit" value="提交" @click="formSubmit"/> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> var vueObj = new Vue({ el : "#vueDiv", data : { userName : "", userAge : "", userSex : "f", hobby : ["运动","看书"],//默认勾选 level : "", desc : "" }, methods : { formSubmit : function(event){ console.log("userName="+this.userName); console.log("userAge="+this.userAge); console.log("userSex="+this.userSex); console.log("hobby="+this.hobby); console.log("level="+this.level); console.log("desc="+this.desc); } } }); </script> </body> </html>
================================
©Copyright 蕃薯耀 2018年11月29日
http://fanshuyao.iteye.com/