6-表单与v-model

6.1+2 基本用法+绑定值

v-model，用于在表单类元素上双向绑定数据

• 输入框

input[type="text"]  或者 textarea
input[type="text"][v-model="message"][placeholder="输入..."]
data:{message:''}
+++++++++++++++++++++++++++++
textarea[v-model=text][placeholder="输入..."]
data:{message:''}

其他：
- 使用v-model后，表单控件显示的值不再关心初始化时的value属性.
- 如果希望在拼音阶段实时更新数据，应该用@input替代v-model

• 单选按钮

//bind:chekced=true/false
    input[type="radio"][:checked="picked"]
    
    data:{checked:true}
++++++++++++++++++++++++
//v-model 和 data的变量名 ； id 和 label-for ; v-model=true/false    value=?
    input[type="radio"][v-model="picked"][value="html"][id="html"]
    label[for="html"]{HTML}
    input[type="radio"][v-model="picked"][value="js"][id="js"]
    label[for="js"]{javascript}
    
    data:{checked:"js"}
++++++++++++++++++++++++
//绑定值     v-model=true/false   :value=?
    input[type="radio"][v-model="picked_bind"][:value="value_bind"]
    
    data:{picked_bind:false,value_bind:123}

• 复选框

//v-model=checked  true/false
    input[type="checkbox"][v-model="checked"][id="checked"]
    label[for=checked]{打勾或者不打勾}
    
    data:{checked:true}
++++++++++++++++++++++++++++
//和多个单选按钮的区别在于 变量的数据类型是数组
    input[type="checkbox"][v-model="checked"][value="html"][id="html"]
    label[for="html"]{HTML}
    input[type=checkbox][v-model="checked"[value="js"][id="js"]
    label[for="js"]{JavaScript}
    
    data:{checked:['html','js']}
+++++++++++++++++++++++++++++
//勾选与未勾选绑定值（貌似不能默认勾选）  keyword:  :true-value   :false-value
    input[type="checkbox"][v-model="toggle"][:true-value:value1][:false-value:value2]
    
    data:{toggle:false,value1:99,value2:88}

• 选择列表

//单选  option有value值，会优先匹配value,没有会直接匹配text值
    select[v-model="selected"]
        option{html}
        option[value="js"]{javascript}
    
    data{selected:'html'}
//多选   multiple  ,  数据类型也是数组
    select[v-model="selected"][multiple]
        option{html}
        option[value="js"]{javascript}
    
    data:['html','js']
//绑定值
select[v-model="selected"]
    option[:value="{number:123}"]{123}

问题：复选框绑定值时候的初值是false，并且不能默认处于勾选状态？

6.3 v-model 修饰符

• .lazy

  //使用 lazy,会转变为在 change 事件中同步 (写完，点一下外面)
      input[type="text"][v-model.lazy="message"]
      p{{{message}}}
      
      data:{message:''}
  

• number

  //输入框输入时，默认时 string 类型，需要用 修饰符 转换为数字格式
      input[type="number"][v-model.number="message"]
      p{{{typeof message}}}
      
      data:{message:123}
  

• .trim

  //过滤首尾空格
      input[type="text"][v-model.trim="message"]
      p{{{message}}}
      
      data:{message:''}