Vue.js 的 v-model

自定义组件的 v-model

推荐始终使用 kebab-case 的事件名(小写连字符)，事件名不存在任何自动化的大小写转换。

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

表单元素上使用 v-model

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。需要通过 JavaScript 在组件的 data 选项中声明初始值。

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
data: {
    picked: ''
}

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>
data: {
    selected: ''
}

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

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!-- 自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">