Vue.js—Difference between v-model and v-bind

问题:

I'm a newbie with Vue.js and I'm learning with an online course on Udemy. The instructor gave me some exercises to do. One of the exercises was making an input text with a default value. I did it very well using v-model. However, the instructor used v-bind:value and I don't understand why.

Can someone give me a simple explanation about the difference between these two and when it's better use each one?

回答1:

From here - Remember:

<input v-model="something">

is just syntactic sugar for:

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