Vue学习系列 -- v-model指令与表单元素学习

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

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

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

 
 





 
 

     姓名:
     

     性别:
     男
     女
     

     年龄:
     
         22
         23
         24
         25
     
     

     爱好:
     看定影
     读书
     旅游
     打游戏
     

     申请原因:
     

          
 

    您提交的个人信息如下：

    姓名：{
    {username}}

    性别：{
    {sex}}

    年龄：{
    {age}}

    爱好：{
    {hobby}}

    申请原因：{
    {reason}}

效果截图如下所示：

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

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

• lazy：在change事件中同步数据信息
• number：将数据转换为Number
• trim：过滤数据左右两边的空格