非常教程

Vue 2参考手册

指南 | Guide

10. Form Input Bindings(表单输入绑定)

基本用法

您可以使用该v-model指令在表单输入和textarea元素上创建双向数据绑定。它会根据输入类型自动选择更新元素的正确方法。虽然有点神奇,但v-model实质上是用于更新用户输入事件数据的语法糖,以及对某些边缘案例的特殊照顾。

v-model将忽略初始valuecheckedselected任何形式的元素中找到的属性。它始终将Vue实例数据视为真相的来源。您应该data在组件选项中声明JavaScript端的初始值。

对于需要IME(中文,日文,韩文等)的语言,您会注意到v-model在IME撰写期间没有更新。如果您想要迎合这些更新,请改用input事件。

Text

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

多行文本

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

textareas(<textarea>{{text}}</textarea>)上的插值将不起作用,改为使用v-model

复选框

单个复选框,布尔值:

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

绑定到相同数组的多个复选框:

<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>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
  el: '#example-3',
  data: {
    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: {{ picked }}</span>

选择

单选:

<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: ''
  }
})

如果v-model表达式的初始值与任何选项都不匹配,则该<select>元素将呈现“未选中”状态。在iOS上,这会导致用户无法选择第一个项目,因为在这种情况下iOS不会触发更改事件。因此,建议使用空值提供禁用选项,如上例所示。

多选(绑定到数组):

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

动态选项呈现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' }
    ]
  }
})

价值绑定

对于Radio,复选框和选择选项,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

Radio

<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

如果您希望用户输入自动作为数字进行类型转换,您可以将number修饰符添加到您的v-model托管输入中:

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

这通常很有用,因为即使是type="number",HTML输入元素的值总是返回一个字符串。

.trim

如果您希望自动修剪用户输入,则可以将trim修饰符添加到v-model托管输入中:

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

带有组件的v-model

如果你还不熟悉Vue的组件,你可以暂时忽略它。

HTML内置的输入类型并不总是满足您的需求。幸运的是,Vue组件允许您构建具有完全自定义行为的可重用输入。这些输入甚至可以与v-model!要了解更多信息,请阅读“组件”指南中的自定义输入。

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录