v-model

VUE 提供了 v-model 指令，用于在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

基本用法

input 和 textarea

所显示的值只依赖于所绑定的数据，不在关心初始化时插入的 value

单选按钮

1. 单个单选按钮，直接用 v-bind 绑定一个布尔值，用 v-model 不行。
2. 多个单选按钮，就需要 v-model 配合 value 使用，绑定选中的单选框的 value 值，此处所绑定的初始值可以随意给。

复选框

1. 单个复选框，直接绑定一个布尔值，可以用 v-model 也可以用 v-bind 。
2. 多个复选框， 需要用 v-model 配合 value 使用，v-model 绑定一个数组。如果绑定的是字符串，则会转化成 true 、false ，与所有绑定的复选框的 checked 属性相对应。

下拉框

1. 如果是单选，有 value 直接优先匹配一个 value 值，没有 value 就匹配 text 值。
2. 如果是多选，就需要 v-model 来配合 value 使用，v-model 绑定一个数组，与复选框类似。
3. v-model 一定是写在 select 标签上。

总结

• 如果是单选，初始化最好给定字符串，因为 v-model 此时绑定的是静态静态字符串或者布尔值。
• 如果是多选，初始化最好给定数组。

绑定值

• 单选按钮
  只需要用 v-bind 给单个单选框绑定一个 value 值，此时 v-model 绑定的就是它的 value 值。
• 复选框
  通过绑定 true-value 和 false-value 来使选中和不选中显示的不一样。
• 下拉框
  在 select 标签上绑定 value 值对 option 并没有影响。

修饰符

• .lazy
  v-model 默认是在 input 输入时同步输入框中的数据，lazy 修饰符可以使其在失去焦点后或者敲击回车键之后再更新。
• .number
  将输入的字符串转化为 number 类型。
• trim
  自动过滤输入的字符串首尾的空格。