Guide
Essentials
- Installation
- Introduction
- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Components
Advanced
- Reactivity in Depth
- Transition Effects
- Transitioning State
- Render Functions
- Custom Directives
- Mixins
- Plugins
- Single File Components
- Production Deployment Tips
- Routing
- State Management
- Unit Testing
- Server-Side Rendering
- TypeScript Support
Migrating
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
Meta
- Comparison with Other Frameworks
- Join the Vue.js Community!
Form Input Bindings
Basic 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.
v-model
will ignore the initial value
, checked
or selected
attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data
option of your component.
For languages that require an IME (Chinese, Japanese, Korean etc.), you’ll notice that v-model
doesn’t get updated during IME composition. If you want to cater for these updates as well, use input
event instead.
Text
|
Message is: {{ message }}
Multiline text
|
{{ message }}
Interpolation on textareas (<textarea>{{text}}</textarea>
) won't work. Use v-model
instead.
Checkbox
Single checkbox, boolean value:
|
Multiple checkboxes, bound to the same Array:
|
|
Checked names: {{ checkedNames }}
Radio
|
Picked: {{ picked }}
Select
Single select:
|
|
If the initial value of your v-model
expression does not match any of the options, the <select>
element will render in an “unselected” state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.
Multiple select (bound to Array):
|
Selected: {{ selected }}
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
|
|
Modifiers
.lazy
By default, v-model
syncs the input with the data after each input
event (with the exception of IME composition as stated above). You can add the lazy
modifier to instead sync after change
events:
|
.number
If you want user input to be automatically typecast as a number, you can add the number
modifier to your v-model
managed inputs:
|
This is often useful, because even with type="number"
, the value of HTML input elements always returns a string.
.trim
If you want user input to be trimmed automatically, you can add the trim
modifier to your v-model
managed inputs:
|
v-model
with Components
If you’re not yet familiar with Vue’s components, just skip this for now.
HTML’s built-in input types won’t always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with v-model
! To learn more, read about custom inputs in the Components guide.