这一节我们主要要学习的就是v-model指令，v-model用于表单类元素上双向绑定数据。
常见的表单元素就是input textarea 单选按钮 双选按钮 下拉列表等。这里，我做了一个简单的注册表单信息提交demo，并将用户提交的信息实时打印出来，废话少说，直接上代码。
下面的demo并未使用UI组件库，所以界面看起来可能有点丑陋，不过已经能说明问题了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model与表单元素结合使用</title> </head> <body> <div id="app1"> <!--input表单使用--> <div> <label for="username">姓名:</label><input type="text" id="username" placeholder="input your name" v-model="username"> <br/> <label for="sex">性别:</label> <input type="radio" v-model="sex" value="男">男</input> <input type="radio" v-model="sex" value="女">女</input> <br/> <label for="age">年龄:</label> <select v-model="age" id="age"> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> <br/> <label for="hobby">爱好:</label> <input id="hobby" type="checkbox" v-model="hobby" value="看定影"/>看定影 <input id="hobby" type="checkbox" v-model="hobby" value="读书"/>读书 <input id="hobby" type="checkbox" v-model="hobby" value="旅游"/>旅游 <input id="hobby" type="checkbox" v-model="hobby" value="打游戏"/>打游戏 <br/> <label for="reason">申请原因:</label> <br/> <textarea v-model="reason" placeholder="input you register reason"> </textarea> </div> <div> 您提交的个人信息如下：<br/> <span>姓名：{{username}}</span><br/> <span>性别：{{sex}}</span><br/> <span>年龄：{{age}}</span><br/> <span>爱好：{{hobby}}</span><br/> <span>申请原因：{{reason}}</span> </div> </body> <!--这里是以CDN引入的方式加载的vue.js--> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el : "#app1", //指定绑定的DOM元素 data : { username : "please input your name", sex : "男", age: 11, hobby : [], reason : "" } }) </script> </html>效果截图如下所示：
分析上面的效果可知，会将input输入框的value绑定到变量username上、将单选按钮选择的性别值绑定到sex变量、将选择的年龄数值绑定到age变量上、将输入的原因多文本信息绑定到reason变量上 。。。
与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
lazy：在change事件中同步数据信息number：将数据转换为Numbertrim：过滤数据左右两边的空格