Vue基础篇-表单双向绑定

1.基本应用

（a）输入框(input)，文本域(textarea)

  
  
{{ message }}

 

（b）复选框(type='checkbox')

  
单个复选框：
  
    
  
多个复选框：
  
  
  

 

（c）单选按钮(type='radio')

  
  

  
  

  选中值为: {{ picked }}

 

（d）下拉菜单(select)

  
    0000
    1111
    2222
  
  
选择的是: {{selected}} 

 

2.双向绑定修饰符

（a）.lazy (转变同步事件)  

默认情况下， v-model 在 input 事件中同步输入框的值与数据，添加一个修饰符 lazy ，转变为在 change 事件中同步。

（b）.number (格式化输入值为数字类型，一般用于type=‘number’中)

将用户的输入值转为 Number 类型（原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 。

（c）.trim (去除收尾空格)

自动过滤用户输入的首尾空格（中间空格无法处理），可以添加 trim 修饰符到 v-model 上过滤输入。

3.常用场景（待补充）

场景一：全选&取消全选

    {{checked}}
    

    val001
    val002
    val003
    

    
        选择的值为:{{checkedNames}}
    

场景二：表单校验

        
    //监听输入框变化最好不要用change，可能会无效
     {{msg}}