<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <form action="" method="post" @submit.prevent="sub"> <input type="text" name="" v-model="user" /> <input type="password" name="" v-model="pwd" /> <br /> 性别： <input type="radio" name="sex" value="男" v-model="sex">男 <input type="radio" name="sex" value="女" v-model="sex">女 <br /> 爱好： <input name="Fruit" type="checkbox" value="足球" v-model="hobby"/>足球 <input name="Fruit" type="checkbox" value="篮球" v-model="hobby"/>篮球 <input name="Fruit" type="checkbox" value="乒乓球" v-model="hobby" />乒乓球 <br /> 城市： <select name="carlist" form="carform" v-model="cityid"> <option value="">请选择</option> <option :value="index" v-for="(city,index) in citys">{{city.city}}</option> </select> <br /> 描述： <textarea name="" rows="" cols="" v-model="ms"></textarea> <br /> <input type="submit" value="提交" /> </form> </div> <script src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:‘#app‘, data:{ user:‘‘, pwd:‘‘, sex:‘女‘, hobby:[], cityid:‘‘, citys:[ {id:1,city:‘CQ‘}, {id:2,city:‘BJ‘}, {id:3,city:‘SH‘}, ], ms:‘‘ }, methods:{ sub(){ console.log(this.user,this.pwd) } } }) </script> </body> </html>
原文：https://www.cnblogs.com/lee-xingxing/p/11216614.html