v-model 绑定checkbox select 以及v-model的修饰符

//这种处理方式，只要checkbox选中，就自动加入到了数组中，取消选中就从数组中移除了
<input type="checkbox" value="篮球" v-model="loves">篮球
<input type="checkbox" value="足球" v-model="loves">足球
<input type="checkbox" value="乒乓球" v-model="loves">乒乓球
<input type="checkbox" value="羽毛球" v-model="loves">羽毛球
<script>
  export default{
    data(){
      return {
          loves:[]
      }
    }
  }
</script>

//select选中那个值，fruit对应的值就是那个
<select name="test" id="" v-model="fruit">
   <option value="苹果" >苹果</option>
   <option value="香蕉" >香蕉</option>
   <option value="榴莲" >榴莲</option>
   <option value="葡萄" >葡萄</option>
</select>
<script>
  export default{
     data(){
       return {
          fruit:'香蕉'
       }
     }
  }
</script>

//select选中那个值，fruits数组中就对应添加那个值
<select name="test" id="" v-model="fruits " multiple>
   <option value="苹果" >苹果</option>
   <option value="香蕉" >香蕉</option>
   <option value="榴莲" >榴莲</option>
   <option value="葡萄" >葡萄</option>
</select>
<script>
  export default{
     data(){
       return {
          fruits:[]
       }
     }
  }
</script>

v-model的修饰符

• lazy

  v-model 是每次修改都会绑定值，添加了 lazy 就只会在回车后或者失去焦点后绑定

  使用

  v-model.lazy = 'msg'

• number

  默认以 string 类型保存在 data 中，通过 number 修饰符可以以 number 类型存入 data 中

  使用

  <input type="number" v-model.number='msg'/>   // input 的类型为 number 只能输入数字,如果没有修饰符，保存到 data 中仍然是 string 类型
  

• trim

  去除字符串两边的空字符

  使用

  v-model.trim = 'msg'

  注：一般浏览器显示的时候不会显示字符串的空格，但在 data 中存在