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.