According to official documentation

The V-model directive creates two-way data binding on the <input>, <textarea>, and < SELECT > elements of the form. It automatically selects the > correct method to update the element based on the control type.

V-model Two examples

  1. Used on form elements

    <input v-model="message" placeholder="edit me">
Copy the code

    The above is equivalent to

    <input v-bind:value='message' @input='message=$event.target.value'>
Copy the code

    For input elements, value property and input events are used by default. Every time the contents of the input box change, the input event is emitted, passing the latest value to Message.

    Different things are used by default for different elements

    Internally, the V-Model uses different properties for different input elements and throws different events:

    • Text and Textarea elements use value property and input events;
    • Checkbox and radio use checked Property and change events;
    • The SELECT field takes value as prop and change as an event.

  2. Used on components

    By default, a V-Model on a component makes use of a prop named Value and an event named Input

    The parent component

    <my-comp v-model='xxx'/> <my-comp v-bind:value='xxx' @input='xxx=argument[0]'/>
Copy the code

    Child components

    <input:value="value" @input="$emit('input', $event.target.value)">
Copy the code

    Prop and Event can also be specified through the Model option

    model: {
    prop: 'checked'.event: 'change'
}
Copy the code

    The equivalent form of the parent component’s V-model changes, and the events triggered by the child component need to change as well.

Comparison with.sync

The.sync modifier was briefly written earlier

Both functions are similar in that they are used for bidirectional binding.

The main differences between the two are:

  1. .sync cannot be used on form elements, v-model can
  2. Sync binds multiple variables, but V-Model binds only one
  3. .sync must listen to ‘Update :propName’