<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h2>表单信息</h2> <!--表单Form--> <form> <label for="account">账号:</label> <input type="text" id="account" placeholder="请输入账号信息" v-model="accountData"><br/><br/> <label for="password">密码:</label> <input type="password" id="password" placeholder="请输入密码" v-model="passwordData"><br/><br/> <lable>性别:</lable> <!--男<input type="radio" name="sex" value="male" checked="checked">--> 男<input type="radio" name="sex" v-model="sex" value="male"> 女<input type="radio" name="sex" v-model="sex" value="female"><br/><br/> <lable>爱好:</lable> 学习<input type="checkbox" v-model="hobby" value="study"> 运动<input type="checkbox" v-model="hobby" value="motion"> 打游戏<input type="checkbox" v-model="hobby" value="game"><br/><br/> <lable>所属校区</lable> <select v-model="city"> <option value="">请选择所属校区</option> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> <br/><br/> <lable for="notes">其它信息:</lable> <textarea id="notes" rows="8" v-model="other"></textarea><br/><br/> <input type="checkbox"> <lable>阅读并接受</lable><a href="http://www.baidu.com">《用户协议》</a><br/><br/> <button>提交</button> </form> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false new Vue({ el:"#root", data(){ return{ accountData:"", passwordData:"", // 单选框,默认选择male sex:"male", hobby:[], city:"", other:"" } } }) </script> </body> </html>