指南

表单输入绑定

基础用法

您可以使用 v-model 指令在表单输入和文本区域元素上创建双向数据绑定。它会根据输入类型自动选择更新元素的正确方式。虽然有点神奇，但 v-model 本质上是针对用户输入事件更新数据的语法糖，以及对一些边缘情况的特殊处理。

文本

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
消息是：{{ message }}

多行文本

<span>Multiline message is:</span>
<p>{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
消息是

{{ message }}


复选框

单个复选框，布尔值

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

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

<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>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

已选名称：{{ checkedNames | json }}

单选按钮

<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>


已选：{{ picked }}

下拉菜单

单选下拉菜单

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
已选：{{ selected }}

多选下拉菜单（绑定到数组）

<select v-model="selected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

已选：{{ selected | json }}

使用 v-for 渲染动态选项

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
已选：{{ selected }}

值绑定

对于单选按钮、复选框和下拉菜单选项，v-model 绑定的值通常是静态字符串（或复选框的布尔值）

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle">
<!-- `selected` is a string "abc" when selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但有时我们可能希望将值绑定到 Vue 实例上的动态属性。我们可以使用 v-bind 来实现。此外，使用 v-bind 允许我们将输入值绑定到非字符串值。

复选框

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b">
// when checked:
vm.toggle === vm.a
// when unchecked:
vm.toggle === vm.b

单选按钮

<input type="radio" v-model="pick" v-bind:value="a">
// when checked:
vm.pick === vm.a

下拉菜单选项

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// when selected:
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

参数属性

lazy

默认情况下，v-model 在每次 input 事件后将输入与数据同步。您可以添加 lazy 属性来更改行为，使其在 change 事件后同步

<!-- synced after "change" instead of "input" -->
<input v-model="msg" lazy>

number

如果您希望用户输入自动持久化为数字，可以在 v-model 管理的输入中添加 number 属性

<input v-model="age" number>

debounce

debounce 参数允许您设置每次按键后到输入值与模型同步之间的最小延迟。当您对每次更新执行昂贵的操作时，这很有用，例如为类型提前自动完成发出 Ajax 请求。

<input v-model="msg" debounce="500">
{{ msg }}

请注意，debounce 参数不会对用户的输入事件进行去抖：它对写入底层数据的操作进行去抖。因此，在使用 debounce 时，您应该使用 vm.$watch() 来响应数据变化。对于对实际 DOM 事件进行去抖，您应该使用 debounce 过滤器。

← 方法和事件处理 过渡 →
发现错误或想为文档做出贡献？ 在 Github 上编辑此页面！