十三 v-model双向绑定

1. 原理:

v-model 其实就是一个语法糖,它的背后本质上包含两个操作: 1. v-bind绑定一个value属性 2. v-on指定给当前元素绑定input事件也就是下面的代码 : 等同于下面的代码等同于



  
    
    
    
  
  
    
        
      
      
      
       {{ message }}

2. v-model和radio的使用

    
      
        男
      
      
        女
      
      选择的性别:{{sex}}

3. v-model和checkedbox使用

    
      
      
        同意协议
      
      选择的是:{{Isagree}}
      
      

      
      篮球
      足球
      羽毛球
      乒乓球
      爱好是:{{ hobbies }}

4. v-model和select的使用　　

    
      
      
      你选择的水果是:{{fruit}}

      
      
      你选择的水果是:{{fruits}}

5. v-model 修饰符

    
      
      
      {{message}}

      
      
      {{age}}-{{typeof age}}

      
      
      输入的名字{{name}}

Vue2x

选择的性别:{{sex}}