表单输入绑定

<input :value="text" @input="event => text = event.target.value">

v-model 指令帮我们简化上述步骤

<input v-model="text">

v-model会根据所使用元素自动使用对应的DOM属性和时间组合：

• 文本类型的<input>和<textarea>元素会绑定value属性并监听input事件
• 复选框类型和单选框类型<input>会绑定checked属性并侦听change事件
• <select>会绑定value属性并侦听change事件

基本用法：

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

注意：<textarea>中不支持插值表达式（{{}}）

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

也可以将多个复选框绑定到同一数组或集合中

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>

单值选择器

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

注：如果v-model表达式初值不匹配任何一个选项，<select>元素会渲染为一个"未选择"状态，建议提供一个空值的禁用选项，如上例

多值选择器

<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

选择器的值可以用v-for动态渲染

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

值绑定

上述例子中v-model绑定的通常是静态字符串或布尔值，有时需要将该值绑定到当前组件实例上的动态数据，这里可以用v-bind实现，如：

复选框

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

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

单选框

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

选择器（v-model支持费字符串类型的值绑定）

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

修饰符

默认情况下v-model会在每次input事件后更新数据，可以添加lazy修饰符改为在每次change事件后更新数据

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number后缀用于将输入的数据自动转为数字

<input v-model.number="age" />

.trim后缀用于自动去除输入内容两端的空格

<input v-model.trim="msg" />