ยทยทยท

Guide

Handling Forms

You can use the v-model directive to create two-way data bindings on form input elements and elements with contenteditable attribute. It automatically picks the correct way to update the element based on the input type.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form id="demo">
    <!-- text -->
    <p><input type="text" v-model="msg"> {&#123;msg&#125;}</p>
    <!-- checkbox -->
    <p><input type="checkbox" v-model="checked"> {&#123;checked ? &quot;yes&quot; : &quot;no&quot;&#125;}</p>
    <!-- radio buttons -->
    <p>
        <input type="radio" name="picked" value="one" v-model="picked">
        <input type="radio" name="picked" value="two" v-model="picked">
        {&#123;picked&#125;}
    </p>
    <!-- select -->
    <p>
        <select v-model="selected">
            <option>one</option>
            <option>two</option>
        </select>
        {&#123;selected&#125;}
    </p>
    <!-- multiple select -->
    <p>
        <select v-model="multiSelect" multiple>
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </select>
        {&#123;multiSelect&#125;}
    </p>
    <p>data: {&#123;$data&#125;}</p>
</form>
1
2
3
4
5
6
7
8
9
10
new Vue({
    el: '#demo',
    data: {
        msg      : 'hi!',
        checked  : true,
        picked   : 'one',
        selected : 'two',
        multiSelect: ['one', 'three']
    }
})

Result

{{msg}}

{{checked ? "yes" : "no"}}

{{picked}}

{{selected}}

{{multiSelect}}

data: {{$data}}

Next: Computed Properties.

Caught a mistake or want to contribute to the documentation? Fork this site on Github!