Skip to content

Commit c1bddaf

Browse files
committed
add form bind to expression
1 parent 5afdf1d commit c1bddaf

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

source/guide/forms.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,46 @@ If you want user input to be automatically persisted as numbers, you can add a `
9494
<input v-model="age" number>
9595
```
9696

97+
## Bind to Expressions
98+
99+
> ^0.12.12 only
100+
101+
When using `v-model` on checkbox and radio inputs, the bound value is either a boolean or a string:
102+
103+
``` html
104+
<!-- toggle is either true or false -->
105+
<input type="checkbox" v-model="toggle">
106+
107+
<!-- pick is "red" when this radio box is selected -->
108+
<input type="radio" v-model="pick" value="red">
109+
```
110+
111+
This can be a bit limiting - sometimes we may want to bind the underlying value to something else. Here's how you can do that:
112+
113+
**Checkbox**
114+
115+
``` html
116+
<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
117+
```
118+
119+
``` js
120+
// when checked:
121+
vm.toggle === vm.a
122+
// when unchecked:
123+
vm.toggle === vm.b
124+
```
125+
126+
**Radio**
127+
128+
``` html
129+
<input type="radio" v-model="pick" exp="a">
130+
```
131+
132+
``` js
133+
// when checked:
134+
vm.pick === vm.a
135+
```
136+
97137
## Dynamic Select Options
98138

99139
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` so that when the options change dynamically, `v-model` is properly synced:

0 commit comments

Comments
 (0)