v-model sets up a bi-directional binding between the template and the component data.

v-model lets us bind a form input element for example, and make it change the Vue data property when the user changes the content of the field:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>

<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

Go to the next lesson