vuejs
/

Vue v-model Directive

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

vuejs

Vue v-model Directive

What is v-model?

The v-model directive creates two-way data binding between form inputs and Vue data.

Basic Syntax

HTMLRead-only
1
<input v-model="name">
<p>{{ name }}</p>

Text Input Example

HTMLRead-only
1
<input v-model="message" placeholder="Enter text">
<p>{{ message }}</p>

Checkbox Binding

HTMLRead-only
1
<input type="checkbox" v-model="isChecked">
<p>{{ isChecked }}</p>

Radio Button Binding

HTMLRead-only
1
<input type="radio" value="Male" v-model="gender">
<input type="radio" value="Female" v-model="gender">
<p>{{ gender }}</p>

Select Dropdown

HTMLRead-only
1
<select v-model="selected">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<p>{{ selected }}</p>

Modifiers

ModifierDescription
.lazyUpdates on change event instead of input
.numberConverts input to number
.trimTrims whitespace

Modifiers Example

HTMLRead-only
1
<input v-model.lazy="name">
<input v-model.number="age">
<input v-model.trim="text">

Best Practices

  • Use v-model for form inputs only
  • Keep data reactive and simple
  • Use modifiers when needed
  • Avoid overusing two-way binding

Common Mistakes

  • Using v-model on non-form elements
  • Ignoring modifiers for data types
  • Overusing two-way binding unnecessarily
  • Mixing v-model with manual event handling incorrectly

Conclusion

The v-model directive simplifies form handling in Vue by providing seamless two-way data binding between inputs and data.

Try it yourself

<input v-model="name">
<p>{{ name }}</p>

Test Your Knowledge

Q1
of 3

v-model is used for?

A
Loop
B
Binding
C
Two-way binding
D
Condition
Q2
of 3

Which modifier trims text?

A
.lazy
B
.number
C
.trim
D
.sync
Q3
of 3

Used on?

A
div
B
form inputs
C
span
D
script

Frequently Asked Questions

What is v-model?

It provides two-way data binding between form input and data.

Where can v-model be used?

On form elements like input, select, and textarea.

What are modifiers?

They modify input behavior like trim, number, and lazy.

Previous

vue v bind

Next

vue v on

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.