vue的数据双向绑定：v-model

1、语法

• 基本语法： v-model.修饰符="data数据仓库中的变量"
  • 修饰符： lazy 
    • lazy: 将v-model的绑定事件由input改为change,
    • number:将输入的数据转换为number类型数据
    • trim: 将输入的数据去除首尾空格
  • data数据仓库中的变量
    • 只能是基础类型(string,number,boolean)，或者是复杂类型里面的单个属性或者单个元素
    • 不能使用简单表达式比如四则元素或者字符串拼接
  • 只能被用在输入型表单元素标签上，以及vue的组件上

    

        
{{ info }}
        
        
        
    
    

2、原理：属性绑定，事件绑定

• input单行文本框： type = "text" | "color " | "range" | "date"
  • 事件绑定： @input 
  • 属性绑定： v-bind:value="属性值"

    

        
        
{{ inputText }}
        

        
        
inputColor
        
    
    

 

• textarea文本域
  • 事件绑定： @input 
  • 属性绑定： v-bind:value="属性值"
  • textarea标签上没有value属性，但它的DOM属性中有value属性，在textarea的正反标签中写值，实际上是往textarea的DOM属性innerHTML和textContent赋值，同时也会往复制一份值给DOM属性value 
  • 当我们修改textarea中的DOM属性value的值时，DOM属性的innerHTML和innerText并不会发生更改，即查看控制台element中的textarea元素正反标签中的值不会发生更改，但页面展示内容会更改成value的新值
  • 
  • 
• select下拉选框
  • 事件绑定：@change
  • 属性绑定: v-bind:value
  • select的选中值 当前选中的option存在value时返回value值，不存在value返回innerHTML

    

        
            1
            2
        
    
    

• input:"radio"单选按钮
  • 事件绑定：@change
  • 属性绑定：v-bind:checked : 该属性值来自于单选按钮的value值和内存中的值的比较结果
  • 如果单选按钮不提供value，内存值会变成null

• Input:"checkbox"复选框
  • 事件绑定： @change
  • 属性绑定: v-bind:checked
  • 如果复选框不提供value，内存值会变成null