Basic Usage

You can use the v-model instruction to create two-way data binding on form control elements; it automatically selects the correct method to update elements according to the type of control; but the v-model is essentially a grammatical sugar, which is responsible for monitoring user input events to update data, and especially for some extreme examples.

The v-model ignores the initial values of the value, checked, selected properties of all form elements. Because it chooses the Vue instance data as the specific value. You should declare the initial value in the component's data option through JavaScript

For languages requiring IME (such as Chinese, Japanese, Korean, etc.) (IME means `input method'), you will find that v-model will not be updated in ime input.

If you also want to implement updates, use the input event.

text

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

Multi-line text

<span>Multiline message is:</span>
<p style="white-space: pre-line">{{ message }}</p><br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

check box

Single checkbox, logical value:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Multiple check boxes are bound to the same array:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<script>
new Vue({
    el: '...',
    data: {
        checkedNames: []
    }
})
</script>

radio button

<div id="example-4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
    el: '#example-4',
    data: {
        picked: ''
    }
})
</script>

Selection List

Radio list:

<div id="example-5">
    <select v-model="selected">
        <option disabled value="">Please choose</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
    el: '...',
    data: {
        selected: ''
    }
})
</script>

If the v-model expresses that the initial value does not match any of the options, the element will be rendered as unchecked. In iOS, this will enable users

The first option cannot be selected because in this case, iOS will not trigger a change event. Therefore, it is recommended to provide disabled options like the one above.

practice

Multiple-choice list (bound to an array):

<div id="example-6">
    <select v-model="selected" multiple style="width: 50px">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
    el: '#example-6',
    data: {
        selected: []
    }
})
</script>

Dynamic options, rendered with v-for:

<select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
    </option>
</select>
<span>Selected: {{ selected }}</span>
<script>
new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
})
</script>

Binding value

For radio buttons, check boxes and select list options, the value of the v-model binding is usually a static string (for check boxes it is a logical value):

<!-- When elected,`picked` For strings "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` by true or false -->
<input type="checkbox" v-model="toggle">
<!-- When elected,`selected` For strings "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

But sometimes we want to bind value to a dynamic property of a Vue instance, which can be implemented with v-bind, and the value of this property can be no more.

Is a string

check box

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
<script>
// When elected
vm.toggle === vm.a
// When not selected
vm.toggle === vm.b
</script>

radio button

<input type="radio" v-model="pick" v-bind:value="a">
<script>
// When elected
vm.pick === vm.a
</script>

Select List Settings

<select v-model="selected">
    <!-- Inline object literal quantity -->
    <option v-bind:value="{ number: 123 }">123</option>
</select>
<script>
// When elected
typeof vm.selected
vm.selected.number
</script>

Modifier

.lazy

By default, v-model synchronizes the values and data of the input box in the input event (except for the IME section above), but you can add a modifier lazy

This translates into synchronization in the change event:

<! - Update in the "change" rather than "input" event - > ____________.
<input v-model.lazy="msg" >

.number

If you want to automatically convert the user's input value to Number type (return the original value if the original value is converted to NaN), you can add a modifier

number to v-model to process input values:

<input v-model.number="age" type="number">

This is usually useful because the value entered in HTML always returns the string type when type="number"

.trim

If you want to automatically filter the first and last spaces of user input, you can add trim modifier to filter input on v-model:

<input v-model.trim="msg">

v-model and components

The built-in input type of HTML sometimes fails to meet your needs. Fortunately, Vue's component system allows you to create a reusable custom behavior

input types, which can even be used with v-model