表单输入绑定

前言

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。故应该在组件的 data 选项中声明初始值。

1. 文本

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

2. 多行文本

在文本区域 (<textarea></textarea>) 插值并不会生效，应用 v-model 来代替。

<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

3. 复选框

3.1 单个复选框，可绑定到布尔值checked

<!-- checked的值为true或false>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

3.2 多个复选框，需绑定到同一个数组

<div id='example-3'>
   <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>
   <br>
   <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
   el: '#example-3',
   data: {
   	checkedNames: []
   }
})

4. 单选按钮

<div id="example-4">
	<input type="radio" id="one" value="One" v-model="picked">
	<label for="one">One</label>
	<br>
	<input type="radio" id="two" value="Two" v-model="picked">
	<label for="two">Two</label>
	<br>
	<span>Picked: {{ picked }}</span>
</div>

new Vue({
	el: '#example-4',
	data: {
		picked: ''
	}
})

5. 选择框

5.1 单选，绑定到一个字符串变量

<div id="example-5">
  <select v-model="selected">
  	<option disabled value="">请选择</option>
  	<option>A</option>
  	<option>B</option>
  	<option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
  	selected: ''
  }
})

注意：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

5.2 多选，绑定到一个数组

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
      <option>A</option>
      <option>B</option>
      <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
      selected: []
  }
})

后记

该部分为学习vue手册摘录下来的，仅供个人加深学习印象、方便整理、及以后有新的学习到的东西便于补充

建议该部分通过vue官方手册去学习：https://cn.vuejs.org/v2/guide/forms.html