What is the difference v-bind and v-model? Provide some code example.

Technology CommunityCategory: Vue.jsWhat is the difference v-bind and v-model? Provide some code example.
VietMX Staff asked 3 years ago

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.

Consider:

<input v-model="something">

and it’s just syntactic sugar for:

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

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).