v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：
app.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs v-model 数据双向绑定 </title> <style type="text/css"> [v-cloak] { display: none } </style> </head> <body> <div> <form> 姓名： <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别： <input type="radio" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份： <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> <p><pre>data: {{$data | json 2}}</pre></p> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script> <script type="text/javascript"> $(function() { new Vue({ el: '#app', data: { data:{ name:'', sex:'', interest:[], identity:'' } } }) }) </script> </html>
使用本站在线HTML/CSS/JavaScript代码运行工具测试运行效果如下：
