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> ```