8. 表单输入绑定

Vue提供了v-model对表单进行数据绑定，可实现双向绑定，即视图发生变化，data也随之发生变化

只有是表单元素有value属性都是可以使用v-model进行绑定的

<input type="radio"  v-model:value="flag" :value="false"/>
// 简写
<input type="radio" v-model="flag" :value="true"/>

多个复选框绑定的data用数组

如果需要绑定boolean类型，可以用v-bind来绑定

复选框可定义选中和未选中value值，但要注意的是，要通过vm（即实例对象或者this）来查看，查找DOM是默认值

 <input
   type="checkbox"
   v-model="toggle"
   true-value="yes"
   false-value="no"
 >

// 当选中时 vm.toggle === 'yes'// 当没有选中时 vm.toggle === 'no'

修饰符

• .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步
• .number 如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符

官网给的例子是下面的：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值

但是如果不设置type="number",输入"2525aaa"是可以把"aaa"去掉的，但如果输入的是"aaa1111"则无法去掉字母

• .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
• 在组件上使用 v-model

<custom-input
   v-bind:value="searchText"
   v-on:input="searchText = $event"
></custom-input>

将其 value attribute 绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

Vue.component('custom-input', {
 props: ['value'],
 template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})