v-model

在组件上使用 v-model

一个组件上的 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)"
    >
  `
})

但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

• 预期：随表单控件类型不同而不同。
• 限制：
  • </li><li>components</li></ul> </li><li><strong>修饰符</strong>：<ul> <li><a rel="nofollow" href="https://cn.vuejs.org/v2/guide/forms.html#lazy">.lazy</a> - 取代 input 监听 change 事件</li><li><a rel="nofollow" href="https://cn.vuejs.org/v2/guide/forms.html#number">.number</a> - 输入字符串转为有效的数字</li><li><a rel="nofollow" href="https://cn.vuejs.org/v2/guide/forms.html#trim">.trim</a> - 输入首尾空格过滤</li></ul> </li><li><strong>用法</strong>：在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。</li><li><strong>参考</strong>：<ul> <li><a rel="nofollow" href="https://cn.vuejs.org/v2/guide/forms.html">表单控件绑定</a></li><li><a rel="nofollow" href="https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6">组件 - 在输入组件上使用自定义事件</a></li></ul> </li></ul> <p>你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。<br />v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。<br />v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：</p> <ul> <li>text 和 textarea 元素使用 value property 和 input 事件；</li><li>checkbox 和 radio 使用 checked property 和 change 事件；</li><li>select 字段将 value 作为 prop 并将 change 作为事件。</li></ul> <p><a name="utrZ0"></a></p> <h2 id="6cchut"><a name="6cchut" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2>