这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: 2 R c& C" K- @; s3 |" ^
- <div id="app">
( u2 {0 _ ]0 r6 c - <p>input 元素:</p>; i w' l( B# Y# M# J
- <input v-model="message" placeholder="编辑我……">
- m2 R4 D3 Q5 k! d- ~/ n) h - <p>消息是: {{ message }}</p>
2 q" O0 A) F. S/ n0 m -
: |9 j, v8 s ]( ^: U7 T6 o - <p>textarea 元素:</p>
9 V0 ? M9 I2 G& b5 F - <p style="white-space: pre">{{ message2 }}</p># W4 |. P: B [1 o& a
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>- X4 ]7 U4 ^" c
- </div>
r* j2 ?1 W+ S+ X; h( l/ k - 1 o6 W- p/ [# |: u) c# R
- <script>5 R4 E: G& i' c* @0 }! x5 N
- new Vue({
2 w9 q9 ^& K% q& h0 O+ C# |/ v - el: '#app',
" X& P. J$ g1 h2 T2 o- @ - data: {" P% ]" r: `, g) A- q5 y2 }& G
- message: 'Runoob',8 U% x: c! s8 z/ @2 _* f5 |& W
- message2: '菜鸟教程\r\nhttp://www.runoob.com'
+ y4 r! k# P ^/ f$ @ - } x; l0 r9 |* @; ? O, {! Q3 D `
- })
- q$ R( U7 G4 E4 h4 ?- o - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
5 h6 W3 S: R4 e3 J) h; V- <div id="app">
7 m! M% N& S' M9 D( Y/ W - <p>单个复选框:</p>8 S' A, k6 y' l5 r
- <input type="checkbox" id="checkbox" v-model="checked">; p! N: F, ^. E' P0 S. P, o
- <label for="checkbox">{{ checked }}</label>
7 t5 _5 T$ ]) r7 h5 {+ `0 s; \3 W -
4 j6 g. w- K! y; w3 o( B6 j5 y - <p>多个复选框:</p>
9 i) a* H. j7 h0 Z - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
1 ]( o7 E& C( y - <label for="runoob">Runoob</label>& u" p$ W+ v9 j; c
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
6 m9 x( y9 u9 h; t! O+ ^. n - <label for="google">Google</label># ?4 R1 G8 s/ ]$ {" G* Q8 B) ~
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
- f: H T6 K7 `/ Q - <label for="taobao">taobao</label>
& y, M8 \' S# z/ I; l K - <br>8 H+ Z+ p4 r w. i& z2 f
- <span>选择的值为: {{ checkedNames }}</span>; t4 _" y4 }: b, \& ^( k
- </div>
) a9 o) r7 W6 F- ?! G) @ -
) b1 U8 H* k$ \: t8 Q% ` - <script>7 y; X+ v. | y* o
- new Vue({
4 Q! }* w+ B; s6 z9 e - el: '#app',
1 W7 `: e( D! e0 a8 B - data: {) E; ?0 f1 J! o" U9 h' F2 u3 }1 d* p. [- j
- checked : false,
- F- ]& [' ], s. k! ^ - checkedNames: []3 N. x+ ~$ I/ w( g
- }2 @6 C! H% T& U- r9 k J
- })
' J4 B3 E7 A5 j - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
* r3 k1 o* p' }/ x% X; F- <div id="app">
9 B3 i6 S' {$ F* u p" N - <input type="radio" id="runoob" value="Runoob" v-model="picked">6 }5 O2 f0 f9 ?/ U' j0 `+ d0 Q
- <label for="runoob">Runoob</label>0 Y, i$ i5 [) D: B8 p
- <br>
- v$ V0 g* r& |8 @% n - <input type="radio" id="google" value="Google" v-model="picked">" e* ^+ N [3 |3 G j2 ~
- <label for="google">Google</label>
" y0 {+ j1 |/ J - <br>
0 R! ?6 X& d7 X, {- `7 e - <span>选中值为: {{ picked }}</span>
' t) s9 _: v2 { l, g - </div>+ f! g) Z0 g% r' c; W
-
8 ?( Z1 E3 _2 @ - <script>
\, O. A6 L9 @4 ] - new Vue({
% o8 s* X3 n, |5 k! ?' v2 ~ - el: '#app',2 v+ T# f( U$ @$ _- P% O2 h8 t- c
- data: {# w$ W `/ t* k
- picked : 'Runoob'
$ e& E. U/ ]( {, w* e" D( B - }0 Y5 z f, \6 L; b$ T! C
- })1 Q) y: [0 ~4 p# q+ g
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
0 X; ?) `" n. p- <div id="app">2 B% d/ M/ U L2 ?
- <select v-model="selected" name="fruit">; N! Q" v, _( b9 U q
- <option value="">选择一个网站</option>7 {$ [' `! t' [- L
- <option value="www.runoob.com">Runoob</option>
1 s/ P( d. i* G8 y - <option value="www.google.com">Google</option>
# ?3 I! t9 U( Q2 g% Z - </select>1 R0 k3 j1 W& W0 [, d$ R2 y/ d. o
-
) U( T5 D" o6 i: G - <div id="output"> s% [! k8 y5 @2 n5 I3 B
- 选择的网站是: {{selected}}# Q1 N2 G, P1 w$ s/ \0 M! _3 z
- </div>, P7 Z& q- h+ A3 |
- </div>
7 n- z, ^" X, _7 D - ) `- Q& U! I ~3 q% K) ~. I
- <script>% f& X; {- J" K" `% n
- new Vue({- ]" v% @: M; |- }5 A7 L
- el: '#app',9 J- Q0 D0 Y0 @' A: |. c6 p
- data: {. J* B# a" v% M5 Z# y8 s
- selected: ''
% T+ k d1 n( s9 d/ j - }' X; m! e* j' T
- })
4 r! i4 H: p* m& L$ l - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->5 M+ ~( T. B/ _' \# R
- <input v-model.lazy="msg" >
复制代码 .number如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值: - <input v-model.number="age" type="number">
复制代码这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入: - <input v-model.trim="msg">
复制代码全选与取消全选 - new Vue({
t; C. z, n4 \0 V - el: '#app',
0 p& R+ z/ ~7 | - data: {
: H6 l6 i% F/ ]7 ?* r! p& Y# \ - checked: false,
$ N9 M) y7 T5 z6 C/ M - checkedNames: [],! T# o( w0 c+ c
- checkedArr: ["Runoob", "Taobao", "Google"]5 l! e- O' l& k
- },' f3 U9 ?# A5 N, g
- methods: {
' x: b1 Y: ?8 z# o5 B6 z/ n - changeAllChecked: function() {3 u+ a* e& J# S/ v6 E
- if (this.checked) {0 S6 z+ D6 k4 m$ ~
- this.checkedNames = this.checkedArr
0 H1 |! D8 W5 K- ]; R - } else {9 f- D- z* P# T7 [% w4 K( ^
- this.checkedNames = []8 b- c4 A! T2 v$ i
- }
% j- |7 p9 y- o$ X D" p$ i - }
& ]% R8 a g" V" ` - },
: P+ v( ^% Z) T" w! d( d+ r( ` - watch: {
2 w4 t, a" }, `+ b - "checkedNames": function() {$ |2 ]; Z1 o& N, t: C: H1 H
- if (this.checkedNames.length == this.checkedArr.length) {
: k! d4 ~3 I& k - this.checked = true6 r$ T. l: R% t6 I
- } else {
9 y3 G# Q) g# D7 @ }4 [- ]# V' R - this.checked = false
& r) v3 C. y$ m9 q$ l - }
/ N1 i" l; f: V - }( j4 x2 k% B4 v& V
- }
3 I4 ^- g- {& D' N* G* X; l& W - })
复制代码
3 i2 ]& Q% w' T; w! X
( i0 Z! [; _; Q" `) W) ^+ C. R7 |$ _* f; v# t) S
0 ?5 l- d- G& v* `# e8 {% j7 p9 h- Y, J1 g
0 Y/ Y9 y, z1 n3 X9 R+ v3 Y/ g( O; G
" r; h! C+ q5 K( D9 E- n3 V' d1 l2 m* J% W9 p
|