Guide
- Installation
- Getting Started
- Overview
- The Vue Instance
- Data Binding Syntax
- Computed Properties
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Methods and Event Handling
- Form Input Bindings
- Transitions
- Components
- Reactivity in Depth
- Custom Directives
- Custom Filters
- Mixins
- Plugins
- Building Large-Scale Apps
- Comparison with Other Frameworks
Form Input Bindings
Basics Usage
You can use the v-model
directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model
is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
Text
<span>Message is: {{ message }}</span> |
Checkbox
Single checkbox, boolean value:
<input type="checkbox" id="checkbox" v-model="checked"> |
Mutiple checkboxes, bound to the same Array:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> |
new Vue({ |
Checked names: {{ checkedNames | json }}
Radio
<input type="radio" id="one" value="One" v-model="picked"> |
Picked: {{ picked }}
Select
Single select:
<select v-model="selected"> |
Multiple select (bound to Array):
<select v-model="selected" multiple> |
Selected: {{ selected | json }}
Dynamic options rendered with v-for
:
<select v-model="selected"> |
new Vue({ |
Value Bindings
For radio, checkbox and select options, the v-model
binding values are usually static strings (or booleans for checkbox):
<!-- `picked` is a string "a" when checked --> |
But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use v-bind
to achieve that. In addition, using v-bind
allows us to bind the input value to non-string values.
Checkbox
<input |
// when checked: |
Radio
<input type="radio" v-model="pick" v-bind:value="a"> |
// when checked: |
Select Options
<select v-model="selected"> |
// when selected: |
Param Attributes
lazy
By default, v-model
syncs the input with the data after each input
event. You can add a lazy
attribute to change the behavior to sync after change
events:
<!-- synced after "change" instead of "input" --> |
number
If you want user input to be automatically persisted as numbers, you can add a number
attribute to your v-model
managed inputs:
<input v-model="age" number> |
debounce
The debounce
param allows you to set a minimum delay after each keystroke before the input’s value is synced to the model. This can be useful when you are performing expensive operations on each update, for example making an Ajax request for type-ahead autocompletion.
<input v-model="msg" debounce="500"> |
Note that the debounce
param does not debounce the user’s input events: it debounces the “write” operation to the underlying data. Therefore you should use vm.$watch()
to react to data changes when using debounce
. For debouncing real DOM events you should use the debounce filter.