表单和 v-model

Vue 提供了v­-model指令， 用于双向绑定表单类元素上 view 与 view-model 的数据

基础用法

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

单行文本

  

    

    你输入的是： {{ msg }}
  

  
  

多行文本

与单行文本类似:

          我是多行文本的初始值
    

正如开头提到的，所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value

image.png

单选按钮

  

    猫猫 

    狗狗   

    现在选中的是： {{petName}}
  

  
  

复选框

单个复选框

单个复选框，直接绑定到布尔值

 

    v-model:  {{ checked }} 
 
  

  
  

多个复选框

多个复选框，绑定到同一个数组：

  

     
    cat

     
    dog

    
    bird
    
 
    你选中了 ： {{ arr }}
  

  
  
  

多选下拉框

多选时，绑定一个数组

  

    
      请选择
      
      猫猫
      狗狗
      小鸟
    
    
 你选中了 ： {{ selected }}
  

  
  

值绑定

对于单选按钮，复选框及下拉框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

单选按钮

只需要用v-­bind给单个单选框绑定一个value值，此时，v-­model绑定的就是他的value值

  

  单选框

    v-bind: {{ msg }} 

    v-model: {{ pick }}
  

  
  
//  当选中时  app.msg === app.pick

当选中时 app.msg === app.pick

复选框

true-value 当选中时
false-value 当没有被选中时

  

  点击

    toggle当前的值： {{ toggle}} 

    选中: {{ toggle === value1 }} 

    未被选中: {{ toggle === value2 }}
  

  
  

下拉框

  

   
     A
   
   当选中时，selected 的值为： {{selected}}
  

  
  

修饰符

.lazy

v­-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其使用 change 事件进行同步（在失去焦点或者敲回车键之后再更新）。
来个 demo 感受一下

.number

自动将用户的输入值转为数值类型

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

.trim

trim 自动过滤输入过程中首尾输入的空格