export default {
  name: 'textarea',
  data () {
    return {
      article: "a"
    }
  }
}

v-model绑定checkbox

我们来看一下v-model绑定checkbox：单个勾选框和多个勾选框

• 单个勾选框：v-model即为布尔值。此时input的value并不影响v-model的值。

• 多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。

单选框示例：

export default {
  name: 'checkbox',
  data () {
    return {
      isAgree: "true"
    }
  }
}

效果：

  
      篮球
      足球
      羽毛球球
      兵乓球
      您的爱好有：{{ sport }}

export default {
  name: 'demo',
  data () {
    return {
      sport: [],
    }
  }
}

v-model绑定radio

v-model绑定radio，用于选择其中一项；

        
            男
        
        
            女
         您选中的是：{{sex}}

export default {
  name: 'demo',
  data () {
    return {
     sex: '',
    }
  }
}

v-model绑定select

和checkbox一样，select也分单选和多选两种情况。

• 单选：只能选中一个值，v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到fruit中；

• 多选：可以选中多个值，v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组fruit中；

        香蕉
        苹果
        橙子
        榴莲
      

export default {
  name: 'demo',
  data () {
  return {
       fruits2: [],
  }
  }
}

        香蕉
        苹果
        橙子
        榴莲
      

v-model的值绑定

目前我们在前面的案例中大部分的值都是在template中固定好的：比如gender的两个输入框值male、female；比如hobbies的三个输入框值basketball、football、tennis. 在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到data返回的对象中，再通过v-bind来进行值的绑定，这个过程就是值绑定。这里不再给出具体的做法，因为还是v-bind的使用过程。

v-model修饰符 - lazy

lazy修饰符是什么作用呢？

默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；，如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发

      
      
      
      
      
      {{ message }}

export default {
  name: 'demo',
  data () {
    return {
       message: "内容",
    }
  }
}

v-model修饰符 - number

我们先来看一下v-model绑定后的值是什么类型的：message总是string类型，即使在我们设置type为number也是string类型；

如果我们希望转换为数字类型，那么可以使用 .number修饰符：

另外，在我们进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换的： 下面的score在进行判断的过程中会进行隐式转化的

v-model修饰符 - trim

如果要自动过滤用户输入的守卫空白字符，可以给v-model添加 trim修饰符

码上掘金代码片段

全部示例代码：

    
    
    
    
    
    




    
        
         {{message}}
        

        
        
            男
        
        
            女
         您选中的是：{{sex}}
        

        
        
            同意
        
        下一步 您的选择：{{agree}}

        

        
        篮球
        足球
        羽毛球球
        兵乓球 您的爱好有：{{sport}}

        

        
        
            香蕉
            苹果
            橙子
            榴莲
         您选中的水果是{{fruits}}

        

        


        
        
            香蕉
            苹果
            橙子
            榴莲
        
        
 您选中的水果是{{fruits2}}
        

        
        
            {{item}}
        
        
 您的爱好是{{hobbies}}
        

        
        
        
        
        
 {{message}}
        

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

        
        
        
        
 {{name}}