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.