表单与 v-model

VUE 提供了 v­-model 指令， 用于在 表单类 的元素上双向绑定事件。

一、v­-model 基本用法

1. input 和 textarea

v­-model 可以用于 input 框，以及 textarea 多行文本框等。

    
    {{value}}
    我是初始化值
    {{message}}

注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的 value 值。

2. 单选按钮

• 单个单选按钮，直接用 v-­bind 绑定一个布尔值，用 v­-model 则不可以。

• 若多个单选框组合使用（用相同 name 实现多个单选框互斥），就需要 v­-model 来配合 value 使用，绑定选中的单选框的 value 值，此处所绑定的初始值可以随意设置。

     小猫
     小狗
     小刺猬
    现在选中的是：{{checkname}}

3. 复选框

• 单个复选框，直接绑定一个布尔值，可以用 v-­model 或 v-­bind。
• 多个复选框
  （1）若组合使用，需要 v­-model 配合 value 使用，v­-model 绑定一个数组；
  （2）若绑定的是字符串，则会转化为 true 和 false，与所有绑定的复选框的 checked 属性相对应。

    单个复选框---v-bind： 

    单个复选框---v-model： 

    多个复选框：
     香蕉
     苹果
     桃子
    现在选中了：{{checks}}

4. 下拉框

• 单选的下拉框，所绑定的 value 初始化值可以为字符串，也可以为数组；若有 value 会直接优先匹配一个 value 值，没有 value 则匹配一个 text 值。
• 多选的下拉框，需要 v-­model 配合 value 来使用，v­-model 绑定一个数组，与复选框类似。
  注意：v-­model 一定是绑定在 select 标签上。

    单选下拉框：
    
        小猫
        小狗
        小刺猬
    
    现在选中的是 {{selected}}
    




    多选下拉框（按Ctrl键点选）：
    
        小猫
        小狗
        小刺猬
    
    现在选中的是 {{selectedmul}}

5. 总结

• 如果是单选，初始化最好给定字符串，因为 v-­model 此时绑定的是静态字符串或者布尔值。
• 如果是多选，初始化最好给定一个数组。

二、绑定值

1. 单选按钮

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

     ----{{picked}}

上例中，起初 v-model 并没有生效；手动选中单选框后，v-­model 绑定的 picked 会被替换成 value 的值。

2. 复选框

动态控制，使复选框选中和未选中时的 value 不同：复选框选中时取的是 true-value 的值，未选中时取的是 false-value 的值。

    
    {{toggle}}
    被选中：{{toggle == value1}}
    未被选中：{{toggle == value2}}

3. 下拉框

在 select 标签上绑定 value 值对 option 并没有影响。

    绑定在select上：
    
        小猫
    
    现在选中的是 {{typeof valueselect1}} --- {{valueselect1}} 


    绑定在option上：
    
        小猫
    
    现在选中的是 {{typeof valueselect2}} --- {{valueselect2}}

三、修饰符

1. lazy
   v-­model 默认是在 input 输入时实时同步输入框的数据，而 .lazy 修饰符可以使其在失去焦点或敲回车键之后再更新。
2. number
   将输入的字符串转化为 number 类型。
3. trim
   trim 会自动过滤输入过程中首尾输入的空格。

    1. lazy
     --- {{inputStr1}} 

     --- {{lazyStr}} 

    2. number  

     --- {{typeof inputStr2}} 

     --- {{typeof isNum}} 

    3. trim 

     length: {{inputStr3.split('').length}} 

     length: {{trimStr.split('').length}}