In this article, we’ll look the difference between v-model and v-bind in Vue.js.
What’s the difference between v-model and v-bind in Vue.js?
The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.
v-model is the combination of v-bind:value and the input event.
For instance,
<template>
<input v-model="something" />
</template>
//...
is the same as
<template>
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
/>
</template>
//...
or
<input
:value="something"
@input="something = $event.target.value"
>
for short.
: is the shorthand for v-bind and @ is the shorthand for v-on:input.
Conclusion
The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.
v-model is the combination of v-bind:value and the input event.
