Close
升级到 Vue 3 | Vue 2 EOL

指南

表单输入绑定

基本用法

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

v-model 会忽略任何表单元素上找到的初始 value、checked 或 selected 属性。它始终将 Vue 实例数据视为真相来源。您应该在 JavaScript 侧声明初始值，在组件的 data 选项中。

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

对于需要 IME（中文、日语、韩语等）的语言，您会注意到 v-model 在 IME 组成期间不会更新。如果您还想处理这些更新，请使用 input 事件。

文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

消息是：{{ message }}

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
多行消息是

{{ message }}


文本区域上的插值（<textarea>{{text}}</textarea>）不起作用。请改用 v-model。

复选框

单个复选框，布尔值

<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 }}</span>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

已选名称：{{ checkedNames }}

单选按钮

<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 disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
已选：{{ selected }}

如果 v-model 表达式的初始值与任何选项都不匹配，则 <select> 元素将以“未选中”状态呈现。在 iOS 上，这将阻止用户选择第一个项目，因为 iOS 在这种情况下不会触发 change 事件。因此，建议提供一个带有空值的 disabled 选项，如上面的示例所示。

多选（绑定到数组）

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

已选：{{ selected }}

使用 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 the first option is selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

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

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'

true-value 和 false-value 属性不会影响输入的 value 属性，因为浏览器不会在表单提交中包含未选中的复选框。要确保在表单中提交两个值之一（即“是”或“否”），请改用单选按钮。

单选按钮

<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 事件后将输入与数据同步（除了 IME 组成，如 上面所述）。您可以添加 lazy 修饰符，以便在 change 事件之后同步

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

.number

如果您希望用户输入自动转换为数字，您可以在 v-model 管理的输入中添加 number 修饰符

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

这通常很有用，因为即使使用 type="number"，HTML 输入元素的值也始终返回字符串。如果值无法使用 parseFloat() 解析，则返回原始值。

.trim

如果您希望自动修剪用户输入中的空格，您可以在 v-model 管理的输入中添加 trim 修饰符

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

v-model 与组件

如果您还不熟悉 Vue 的组件，现在可以跳过此部分。

HTML 的内置输入类型并不总是能满足您的需求。幸运的是，Vue 组件允许您构建具有完全自定义行为的可重用输入。这些输入甚至可以与 v-model 一起使用！

要了解更多信息，请阅读组件指南中的 自定义输入 部分。

← 事件处理 组件基础 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。