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
- Join the Vue Community!
Form Input Bindings
Basics Usage
You can use the v-model
directive to create two-way data bindings on form input and textarea 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
|
Multiline text
|
{{ message }}
Checkbox
Single checkbox, boolean value:
|
Mutiple checkboxes, bound to the same Array:
|
|
Checked names: {{ checkedNames | json }}
Radio
|
Picked: {{ picked }}
Select
Single select:
|
Multiple select (bound to Array):
|
Selected: {{ selected | json }}
Dynamic options rendered with v-for
:
|
|
Value Bindings
For radio, checkbox and select options, the v-model
binding values are usually static strings (or booleans for checkbox):
|
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
|
|
Radio
|
|
Select Options
|
|
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:
|
number
If you want user input to be automatically persisted as numbers, you can add a number
attribute to your v-model
managed inputs:
|
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.
|
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.