Vue .js binding to 2.0 form controls

Vue .js binding to 2.0 form controls

Basic usage

You can use the v-model directive to create bidirectional data binding on form control elements. I t automatically picks the correct method to update the element based on the control type. Although somewhat magical, v-model is essentially just syntax sugar, which listens for user input events to update data and specifically handles some extreme examples.

v-model does not care about the value generated by the initialization of the form control. Because it selects the Vue instance data as the specific value.

Text

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

Message is:

Multiple lines of text

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

Note: Interpolation in the text area (slt;textarea>/textarea?gt; ) does not take effect and v-model is applied instead.

Check box

Single check box, logical value:

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

false

Multiple check boxes, bound to the same array:

<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: []
  }
})

The option button

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

Single list:

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

A B C

Selected:

Multi-select list (bound to an array):

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

Dynamic option, rendered with 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' }
    ]
  }
})

One Two Three

Selected: A

Binding value

For a ticket button, check box, and select a list option, the value of the v-model binding is usually a static string (for check boxes it is a logical value):

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

But sometimes we want to bind value to a dynamic property of the Vue instance, which can be implemented with v-bind, and the value of that property can be not a string.

Check box

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

The option button

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

Select the list settings

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

Modifier

.lazy

By default, v-model synchronizes the value and data of the input box in the input event, but you can add a modifier lazy to move to sync in the change event:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

If you want to automatically convert the user's input value to the Number type (return the original value if the conversion result of the original value is NaN), you can add a modifier number to v-model to handle the input value:

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

This is often useful because values entered in HTML always return string types when type is "number".

.trim

If you want to automatically filter the first and last spaces of user input, you can add the trim modifier to filter the input on v-model:

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

v-model with components

If you're not familiar with Vue's components, skip here.

HTML-built input types sometimes don't meet your needs. F ortunately, Vue's component system allows you to create input types with customizable behavior that can even be used with v-models! To learn more, see Custom input types.