Vue TutorialLesson 13Free preview

Vue v-model

This lesson is part of Vue · All levels

Summary

The v-model is a sugar syntax for combining a v-bind with a v-on so that the value of a data and a form element are always two-way synchronous. When the user types, the data changes; when the data is changed through code, the display value is updated. v-models can be used on input, textarea, select, to custom components via modelValue and update:modelValue.

Key points

The v-model implemented two-way binding declaratively.
Internally v-models are equivalent to:value plus @input.
V-models support the .lazy, .number, and .trim modifications.
On the custom component, the v-model uses the modelValue props and emits update:modelValue.
The v-model works on input, textarea, select, and component.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.