<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height: auto; } form div span:first-child { display: inline-block; width: 100px; } </style> </head> <body> <div id="app"> <form action="http://www.baidu.com"> <div> <span>姓名：</span> <span> <input type="text" v-model='uname'> </span> </div> <div> <span>性别：</span> <span> <input type="radio" id="male" value="1" v-model='gender' > <label for="male">男</label> <input type="radio" id="female" value="2" v-model='gender'> <label for="female">女</label> </span> </div> <div> <span>爱好：</span> <input type="checkbox" id="ball" value="1" v-model='bobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model='bobby'> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model='bobby'> <label for="code">写代码</label> </div> <div> <span>职业：</span> <select v-model='occupation' multiple='true'> <option value="0">请选择职业...</option> <option value="1">教师</option> <option value="2">软件工程师</option> <option value="3">律师</option> </select> </div> <div> <span>个人简介：</span> <textarea v-model='description'></textarea> </div> <div> <input type="submit" value="提交" @click.prevent = 'handle' > </div> </form> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el:'#app', data:{ uname:'lisi', gender:1, bobby:['2','3'],//数组因为是多个值 occupation:['2'], description:'' }, methods:{ handle:function(){ // console.log(this.uname); // console.log(this.gender); // console.log(this.bobby.toString()); // console.log(this.occupation); console.log(this.description); } } }) </script> </body> </html>