Vue.js—Difference between v-model and v-bind
From here - Remember:
<input v-model="something">
is essentially the same as:
<input v-bind:value="something" v-on:input="something = $event.target.value">
or (shorthand syntax):
<input :value="something" @input="something = $event.target.value">
So v-model
is a two-way binding for form inputs. It combines v-bind
, which brings a js value into the markup, and v-on:input
to update the js value.
Use v-model
when you can. Use v-bind
/v-on
when you must :-) I hope your answer was accepted.
v-model
works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model
with input type=date
if your model stores dates as ISO strings (yyyy-mm-dd). If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.
v-model
has some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-input
will fire much more frequently.
v-model
also has modifiers .lazy
, .trim
, .number
, covered in the doc.
In simple wordsv-model
is for two way bindings means: if you change input value, the bound data will be changed and vice versa.
but v-bind:value
is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
check out this simple example: https://jsfiddle.net/gs0kphvc/
v-model
it is two way data binding, it is used to bind html input element when you change input value then bounded data will be change.
v-model is used only for HTML input elements
ex: <input type="text" v-model="name" >
v-bind
it is one way data binding,means you can only bind data to input element but can't change bounded data changing input element.v-bind is used to bind html attribute
ex: <input type="text" v-bind:class="abc" v-bind:value="">
<a v-bind:href="home/abc" > click me </a>