v-model Two-way Binding for Form Inputs
Last updated: 2026-10-22
v-model Two-way Binding for Form Inputs
v-model creates two-way binding between a form control and data: typing updates the state and state updates the control.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<input v-model="name">
<textarea v-model="desc"></textarea>
<input type="checkbox" v-model="agree">
<select v-model="city"><option>Wuhan</option></select>⚙️ Arguments
| expression | The state property to bind; modifiers .lazy, .number and .trim tweak the sync behaviour |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
Typing in the input updates the greeting in real time.💡 Key Points
💡 Tip The .number modifier coerces to a number — essential for numeric work.
ℹ️ Note A checkbox bound to an array collects multiple values; bound to a boolean it is a single toggle.
⚠️ Warning v-model is sugar for :value plus @input; on custom components it is defined via modelValue or defineModel().
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Is the bound value a number or a string?
A Strings by default — add .number, especially for numeric inputs.
Q How does v-model work on a custom component?
A Declare the modelValue prop plus update:modelValue (or use defineModel() in 3.4+).
Q Can several inputs bind the same state?
A Yes — all stay in sync; editing one updates the others immediately.
