指南

表单 input 绑定

基础用法

可以通过使用 v-model 指令，在表单 input 和 textarea 元素上创建双向数据绑定。v-model 指令可以根据 input 的 type 类型，自动地以正确的方式更新元素。虽然略显神奇，然而本质上 v-model 不过是「通过监听用户的 input 事件来更新数据」的语法糖，以及对一些边界情况做特殊处理。

v-model 会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值，而总是将 Vue 实例中的 data 作为真实数据来源。因此你应该在 JavaScript 端的组件 data 选项中声明这些初始值，而不是 HTML 端。

对于需要使用输入法的语言（中文、日文、韩文等），你会发现，在输入法字母组合窗口输入时，v-model 并不会触发数据更新。如果你想在此输入过程中，满足更新数据的需求，请使用 input 事件。

单行文本(text)

<input v-model="message" placeholder="编辑">
<p>message 是：{{ message }}</p>

message 是：{{ message }}

多行文本(multiple text)

<span>多行 message 是：</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="添加多行"></textarea>
多行 message 是：

{{ message }}


在 textarea 中插值（<textarea>{{text}}</textarea>）并不会生效。使用 v-model 来替代。

checkbox

单选 checkbox，绑定到布尔值：

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

多选 checkbox，绑定到同一个数组：

<div id='example-3'>
  <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>勾选的名字是：{{ checkedNames }}</span>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

勾选的名字是：{{ checkedNames }}

radio

<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 }}</span>


选中的是：{{ picked }}

select

单选 select：

<select v-model="selected">
  <option disabled value="">请选择其中一项</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>选中的是：{{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
选中的是：{{ selected }}

如果 v-model 表达式的初始值，不能与任何 option 选项匹配，<select> 元素将会渲染为“未选中”状态。在 iOS 中，这会导致用户无法选中第一项，因为在这种“未选中”状态的情况下，iOS 不会触发 change 事件。因此，推荐按照上面的示例，预先提供一个 value 为空字符串的禁用状态的 option 选项。

多选 select（绑定到一个数组）：

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>选中的是：{{ selected }}</span>

选中的是：{{ selected }}

使用 v-for 渲染动态的 option：

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

与 value 属性绑定

对于 radio, checkbox 和 select 的 option 选项，通常可以将 v-model 与值是静态字符串的 value 属性关联在一起（或者，在 checkbox 中，绑定到布尔值）：

<!-- 当选中时，`picked` 的值是字符串 "a"（译者注：如果没有 value 属性，选中时值是 null） -->
<input type="radio" v-model="picked" value="a">

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

<!-- 当选中第一个选项时，`selected` 的值是字符串 "abc"（译者注：如果没有 value 属性，选中时 selected 值是 option 元素内的文本） -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

然而，有时可能需要把 value 与 Vue 实例上的一个动态属性绑定在一起。这时我们可以通过 v-bind 来实现。v-bind 还允许我们将 input 元素的值绑定到非字符串值。

checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// 选中时：
vm.toggle === 'yes'
// 没有选中时：
vm.toggle === 'no'

true-value 和 false-value 属性不会影响到 input 元素的 value 属性，这是因为浏览器在提交表单时，并不会包含未被选中的 checkbox 的值。如果要确保表单中，这两个值的一个能够被提交（例如 “yes” 或 “no”），请换用类型是 radio 的 input 元素。

radio

<input type="radio" v-model="pick" v-bind:value="a">
// 选中时
vm.pick === vm.a

select 选项

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 选中时：
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符(modifiers)

.lazy

默认情况下，v-model 会在每次 input 事件触发之后，将数据同步至 input 元素中（除了上述提到的输入法组合文字时不会）。可以添加 lazy 修饰符，从而转为在触发 change 事件后同步：

<!-- 在触发 "change" 事件后同步，而不是在触发 "input" 事件后更新 -->
<input v-model.lazy="msg" >

.number

如果想要将用户的输入，自动转换为 Number 类型（译注：如果转换结果为 NaN 则返回字符串类型的输入值），可以在 v-model 之后添加一个 number 修饰符，来处理输入值：

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

这通常很有用，因为即使是在 type="number" 时，HTML 中 input 元素也总是返回一个字符串类型的值。

.trim

如果想要将用户的输入，自动过滤掉首尾空格，可以在 v-model 之后添加一个 trim 修饰符，来处理输入值：

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

在组件上使用 v-model

如果你还不熟悉 Vue 组件，现在先跳过此处。

HTML 内置的几种 input 类型有时并不总能满足需求。幸运的是，使用 Vue 可以创建出可复用的输入框组件，并且能够完全自定义组件的行为。这些输入框组件甚至可以使用 v-model！想要了解更多信息，请阅读组件指南中自定义输入框)。

原文：https://vuejs.org/v2/guide/forms.html

← 事件处理 组件基础 →
发现错误？想参与编辑？ 在 GitHub 上编辑此页！