Vue 中使用 v-model 双向数据绑定

Question

双向数据绑定 的强大模式 使用 Vue 构建 JavaScript 表单 。 例如，假设您有一个 input 元素和一个 JavaScript 变量 value。
两种方式数据绑定意味着：

1. 当用户输入 input，value 被更新以匹配中的值 input。
2. 当你更新 value， 这 input 元素的内容更新以匹配 value。

Vue 支持两种方式的数据绑定 v-model 值。 在下面的示例中，如果您输入输入，Vue 将在 h1 元素。 另外，如果你更新 value 通过单击重置按钮，Vue 将显示新的 value 在里面 input 和 h1 元素。

const app = new Vue({
  data: () => ({ value: 'Hello, World' }),
  template: `
    <div>
      <h1>{{value}}</h1>
      <div>
        <input v-model="value"></input>
      </div>
      <button v-on:click="value = 'Hello, World'">
        Reset
      </button>
    </div>
  `
});

这是一个例子 。

带有复选框和下拉菜单

这 v-model 属性与其他本机输入无缝协作。 如果您有 复选框 类型的输入， v-model 将存储一个布尔值：

const app = new Vue({
  data: () => ({ value: false }),
  template: `
    <div>
      <h1>{{value}}</h1>
      <div>
        <input type="checkbox" v-model="value"></input>
      </div>
      <button v-on:click="value = false">
        Reset
      </button>
    </div>
  `
});

这是一个例子 v-model 带复选框 。

如果你附上 v-model 到一个 select 元素，Vue 将绑定到所选选项的 value。

const app = new Vue({
  data: () => ({ value: 'B' }),
  template: `
    <div>
      <h1>{{value}}</h1>
      <div>
        <select v-model="value">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
      <button v-on:click="value = 'B'">
        Reset
      </button>
    </div>
  `
});

自定义输入

在引擎盖下， v-model 建立在其他 2 个 Vue 属性之上：

1. v-bind 将输入绑定到 JavaScript 值。
2. v-on 监听 input 事件。

您可以使用 v-model 使用 自定义 Vue 组件 通过接受名为 value 的道具并发出名为 input 的事件来，例如，下面的自定义组件是一个假选择，使用 div 元素。 点击一个 div 选择它。

Vue.component('my-select', {
  // `v-model` passes the 'value' as a prop...
  props: ['value'],
  methods: {
    set: function(v) {
      // And listens to the 'input' event for changes
      this.$emit('input', v);
    }
  },
  template: `
    <div>
      <div v-for="v in ['A', 'B', 'C']" v-on:click="set(v)">
        {{v}}
        <span v-if="v === value">[x]</span>
      </div>
    </div>
  `
});

const app = new Vue({
  data: () => ({ value: 'B' }),
  template: `
    <div>
      <h1>{{value}}</h1>
      <div>
        <my-select v-model="value"></my-select>
      </div>
      <button v-on:click="value = 'B'">
        Reset
      </button>
    </div>
  `
});

这是一个例子