v-model 数据双向绑定（一般表单用的多） · vue

# v-model # 主要是做数据绑定，把表单数据提交到后端用的例如 ``` 姓名：<input type="text" v-model="val"> ``` 我们说过vue是mvvm框架，vue的核心之一就是双向数据绑定我们看下面的案例 ``` <p> 姓名：<input type="text" v-model="val"> {{val}} </p> ``` ## 数据中心内容 ``` var vue = new Vue({ el: "#app", data: { val: ' ' } }) ``` ![](https://img.kancloud.cn/20/27/20270d99ed1a15bf2788be5927304447_823x320.png) ## 实际使用： ![](https://img.kancloud.cn/7a/1c/7a1c664a928211644dc0d9e1109616db_2774x1391.png) # 代码案例： ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="vue/vue.js"></script> <title></title> </head> <body> <div id="app" v-clock> <h2>问卷调查</h2> <p> 姓名: <input type="text" v-model="name"> </p> <p> 性别: <input type="radio" name="sex" value="男" v-model="name">男 <input type="radio" name="sex" value="女" v-model="name">女 </p> <p> 爱好: <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">读书 </p> <p> 籍贯: <select name="native" id="" v-model="native"> <option value="河北">河北</option> <option value="河南">河南</option> <option value="山东">山东</option> <option value="山西">山西</option> </select> </p> <p> 您填写表的内容为姓名:{{name}},性别:{{sex}},爱好:{{hobby}},籍贯{{native}} </p> <button @click="submit">提交</button> </div> </body> </html> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ name: '', sex:'男', hobby:[], native: '河北' }, methods:{ submit(){ let obj={ name:this.name, sex:this.sex, hobboy:this.hobby, native:this.native } console.log(obj) } } }) </script> ```