Vue 表单v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但 v-model 本质上不过是语法糖。

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

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

    1.text 和 textarea 元素使用 -- value 属性 和 input 事件；
    2.checkbox 和 radio 元素使用 -- checked 属性 和 change 事件；
    3.select 元素使用 -- value 属性 和 change 事件;

修饰符
1.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

2.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

3.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

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