Skip to content

Commit 8bc4533

Browse files
yyx990803yyx990803
committed
handling forms
1 parent 781ae73 commit 8bc4533

File tree

1 file changed

+114
-46
lines changed

1 file changed

+114
-46
lines changed

‎source/guide/forms.md

Lines changed: 114 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,70 +3,138 @@ type: guide
33
order: 7
44
---
55

6-
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.
6+
## The Basics
7+
8+
You can use the `v-model` directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type.
79

810
**Example**
911

1012
``` html
1113
<form id="demo">
12-
<!-- text -->
13-
<p><input type="text" v-model="msg"> {&#123;msg&#125;}</p>
14-
<!-- checkbox -->
15-
<p><input type="checkbox" v-model="checked"> {&#123;checked ? &quot;yes&quot; : &quot;no&quot;&#125;}</p>
16-
<!-- radio buttons -->
17-
<p>
18-
<input type="radio" name="picked" value="one" v-model="picked">
19-
<input type="radio" name="picked" value="two" v-model="picked">
20-
{&#123;picked&#125;}
21-
</p>
22-
<!-- select -->
23-
<p>
24-
<select v-model="selected">
25-
<option>one</option>
26-
<option>two</option>
27-
</select>
28-
{&#123;selected&#125;}
29-
</p>
30-
<!-- multiple select -->
31-
<p>
32-
<select v-model="multiSelect" multiple>
33-
<option>one</option>
34-
<option>two</option>
35-
<option>three</option>
36-
</select>
37-
{&#123;multiSelect&#125;}
38-
</p>
39-
<p>data: {&#123;$data&#125;}</p>
14+
<!-- text -->
15+
<p>
16+
<input type="text" v-model="msg">
17+
{&#123;msg&#125;}
18+
</p>
19+
<!-- checkbox -->
20+
<p>
21+
<input type="checkbox" v-model="checked">
22+
{&#123;checked ? &quot;yes&quot; : &quot;no&quot;&#125;}
23+
</p>
24+
<!-- radio buttons -->
25+
<p>
26+
<input type="radio" name="picked" value="one" v-model="picked">
27+
<input type="radio" name="picked" value="two" v-model="picked">
28+
{&#123;picked&#125;}
29+
</p>
30+
<!-- select -->
31+
<p>
32+
<select v-model="selected">
33+
<option>one</option>
34+
<option>two</option>
35+
</select>
36+
{&#123;selected&#125;}
37+
</p>
38+
<!-- multiple select -->
39+
<p>
40+
<select v-model="multiSelect" multiple>
41+
<option>one</option>
42+
<option>two</option>
43+
<option>three</option>
44+
</select>
45+
{&#123;multiSelect&#125;}
46+
</p>
47+
<p><pre>data: {&#123;$data | json 2&#125;}</pre></p>
4048
</form>
4149
```
4250

4351
``` js
4452
new Vue({
45-
el: '#demo',
46-
data: {
47-
msg : 'hi!',
48-
checked : true,
49-
picked : 'one',
50-
selected : 'two',
51-
multiSelect: ['one', 'three']
52-
}
53+
el: '#demo',
54+
data: {
55+
msg : 'hi!',
56+
checked : true,
57+
picked : 'one',
58+
selected : 'two',
59+
multiSelect: ['one', 'three']
60+
}
5361
})
5462
```
5563

5664
**Result**
5765

58-
<form id="demo"><p><input type="text" v-model="msg"> {&#123;msg&#125;}</p><p><input type="checkbox" v-model="checked"> {&#123;checked ? &quot;yes&quot; : &quot;no&quot;&#125;}</p><p><input type="radio" v-model="picked" name="picked" value="one"><input type="radio" v-model="picked" name="picked" value="two"> {&#123;picked&#125;}</p><p><select v-model="selected"><option>one</option><option>two</option></select> {&#123;selected&#125;}</p><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>
66+
<form id="demo"><p><input type="text" v-model="msg"> {&#123;msg&#125;}</p><p><input type="checkbox" v-model="checked"> {&#123;checked ? &quot;yes&quot; : &quot;no&quot;&#125;}</p><p><input type="radio" v-model="picked" name="picked" value="one"><input type="radio" v-model="picked" name="picked" value="two"> {&#123;picked&#125;}</p><p><select v-model="selected"><option>one</option><option>two</option></select> {&#123;selected&#125;}</p><p><select v-model="multiSelect" multiple><option>one</option><option>two</option><option>three</option></select>{&#123;multiSelect&#125;}</p><p>data:<pre style="font-size:13px;background:transparent;line-height:1.5em">{&#123;$data | json 2&#125;}</pre></p></form>
5967
<script>
6068
new Vue({
61-
el: '#demo',
62-
data: {
63-
msg : 'hi!',
64-
checked : true,
65-
picked : 'one',
66-
selected : 'two',
67-
multiSelect: ['one', 'three']
68-
}
69+
el: '#demo',
70+
data: {
71+
msg : 'hi!',
72+
checked : true,
73+
picked : 'one',
74+
selected : 'two',
75+
multiSelect: ['one', 'three']
76+
}
6977
})
7078
</script>
7179

80+
## Dynamic Select Options
81+
82+
When you need to dynamically render a list of options for a `<select>` element, it's recommended to use an `options` attribute together with `v-model`:
83+
84+
``` html
85+
<select v-model="selected" options="myOptions"></select>
86+
```
87+
88+
In your data, `myOptions` should be an keypath/expression that points to an Array to use as its options. The Array can contain plain strings, or contain objects.
89+
90+
The object can be in the format of `{text:'', value:''}`. This allows you to have the option text displayed differently from its underlying value:
91+
92+
``` js
93+
[
94+
{ text: 'A', value: 'a' },
95+
{ text: 'B', value: 'b' }
96+
]
97+
```
98+
99+
Will render:
100+
101+
``` html
102+
<select>
103+
<option value="a">A</option>
104+
<option value="b">B</option>
105+
</select>
106+
```
107+
108+
Alternatively, the object can be in the format of `{ label:'', options:[...] }`. In this case it will be rendered as an `<optgroup>`:
109+
110+
``` js
111+
[
112+
{ label: 'A', options: ['a', 'b']},
113+
{ label: 'B', options: ['c', 'd']}
114+
]
115+
```
116+
117+
Will render:
118+
119+
``` html
120+
<select>
121+
<optgroup label="A">
122+
<option value="a">a</option>
123+
<option value="b">b</option>
124+
</optgroup>
125+
<optgroup label="B">
126+
<option value="c">c</option>
127+
<option value="d">d</option>
128+
</optgroup>
129+
</select>
130+
```
131+
132+
## Casting Value as Number
133+
134+
If you want user input to be automatically persisted as numbers, you can add a `number` attribute to your `v-model` managed inputs:
135+
136+
``` html
137+
<input v-model="age" number>
138+
```
139+
72140
Next: [Computed Properties](/guide/computed.html).

0 commit comments

Comments
 (0)