Vue学习系列

这一节我们主要要学习的就是v-model指令，v-model用于表单类元素上双向绑定数据。

常见的表单元素就是input textarea 单选按钮 双选按钮 下拉列表等。这里，我做了一个简单的注册表单信息提交demo，并将用户提交的信息实时打印出来，废话少说，直接上代码。

下面的demo并未使用UI组件库，所以界面看起来可能有点丑陋，不过已经能说明问题了。

效果截图如下所示：

分析上面的效果可知，会将input输入框的value绑定到变量username上、将单选按钮选择的性别值绑定到sex变量、将选择的年龄数值绑定到age变量上、将输入的原因多文本信息绑定到reason变量上 。。。

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。