这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
1 |& W8 g- T7 K) @! W- <div id="app">
7 E* r, _8 {6 U5 s) a: \) w - <p>input 元素:</p>
9 p. I% _( [. E2 l8 `; \( G$ e - <input v-model="message" placeholder="编辑我……">% _ n, X/ k5 b2 l6 r
- <p>消息是: {{ message }}</p>! d4 p( G) `. Z; B7 {* P
- ! n1 E) Z% A" A' }0 [: R% s
- <p>textarea 元素:</p>
. G7 \2 z9 c m, e5 q1 V4 @ - <p style="white-space: pre">{{ message2 }}</p>
) K2 ~+ Q4 }3 d" n% ~( G - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
+ @6 X4 U9 j0 t: }, K7 K1 m2 Y' q - </div>
2 @5 Y9 @3 y7 ?; L. b) a1 z: p - 0 b" |( i* k. a7 J0 t2 U$ l7 n
- <script>
p% W5 ], J$ Z6 f7 R/ L: N - new Vue({
% ~. m1 ~; Z1 I - el: '#app',
; K( r+ N5 u( U1 Q - data: {1 y: ^( F8 n( `5 f* q* Q/ S
- message: 'Runoob',
+ _& F$ T7 m: Z9 ~ - message2: '菜鸟教程\r\nhttp://www.runoob.com'+ r# Y8 q$ |' F$ \/ p! J
- }
! y- L( z# l% ]0 H* B - })
' g4 i1 I! b3 d: K2 d4 e - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
/ U! ~+ z1 [( ]# V- <div id="app">& J% l+ I3 p @) @
- <p>单个复选框:</p>8 _) B* B! [6 w) Q( \) ?3 F
- <input type="checkbox" id="checkbox" v-model="checked">
& b$ \+ }/ @3 u5 l$ F# o" \ - <label for="checkbox">{{ checked }}</label>
% Y$ ~3 h6 m1 `6 k& x& o5 C - + @0 t+ d$ g5 J3 C
- <p>多个复选框:</p>! `# i* q/ W/ a& K' L$ H1 d
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
0 L, D; o. ?# F. H8 j0 b - <label for="runoob">Runoob</label>. X$ m% T1 X( |
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
* }3 e0 `* w" _' i" C: k. u - <label for="google">Google</label>
- \+ g4 y& F o! @; G - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">4 [' t$ V! u6 O9 q/ \, d
- <label for="taobao">taobao</label>
$ W ~: _7 w6 @- P7 p7 L6 q - <br>$ K( @% ]- c }8 ^5 b' j6 M
- <span>选择的值为: {{ checkedNames }}</span>0 ?$ N* t1 Z" E$ h8 D. G
- </div>
, R5 k- U9 p. k* N0 {; ~3 h- B -
, |& \0 ?% O* B- q! K/ k- v1 b - <script>
: Y; ^ ~. d# F. T4 a+ |, z - new Vue({$ D$ E0 i, L5 r% ]) O% T/ V# m
- el: '#app',
* G/ H$ d" e" |& k# T/ B/ G9 e - data: {
, a7 W3 H8 @. ]* ?+ } - checked : false,4 T; Q1 y, o# z* B) V/ W. |! \
- checkedNames: []" n- o- G# e7 p' M$ P
- }# K! |; d7 {6 w9 i1 H
- }), O0 g# |1 I1 M# B' R" b. u
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
4 h7 f% c' l) j; r1 l; o3 D- <div id="app">
5 C1 s3 _" d& I3 M+ H - <input type="radio" id="runoob" value="Runoob" v-model="picked">, _6 j- k i4 @$ H
- <label for="runoob">Runoob</label>' K7 a. ]: i, f. |/ j
- <br>- b4 d& L! e5 J7 a( G! |5 G7 Q
- <input type="radio" id="google" value="Google" v-model="picked">
4 J ^5 Y7 R# t! } - <label for="google">Google</label># i, i, l+ d4 g& r4 ^
- <br>
$ N. h1 ~( v& q7 z: ~" p - <span>选中值为: {{ picked }}</span>
% g1 r8 ~& v$ o - </div>. r! n0 b7 ?- E
- 7 a9 E1 b+ T" S1 [/ i5 L
- <script>& n+ e. T/ i8 r! h
- new Vue({
" n: c9 s( q9 V/ |4 L" w - el: '#app',& Z( [; Y- }3 ^5 \. D* G+ B/ N/ i5 B
- data: {9 ~( h+ x6 d4 u. ?
- picked : 'Runoob'. E5 u0 @+ q* O. \6 C
- }
! Y) A) G6 z7 d2 u1 _( x - })2 m7 e! @/ `: `- k. r+ i% [% N
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
9 G1 v* q" U( f; K; m4 {8 M- <div id="app">9 [$ u8 G% O. l
- <select v-model="selected" name="fruit">
$ j' k2 ~& V% w9 M# x; A( F" x - <option value="">选择一个网站</option>
) v9 P6 Y6 T: x* f- c - <option value="www.runoob.com">Runoob</option>
0 ~) B3 E( @* s ?2 K0 s. ~ - <option value="www.google.com">Google</option>
0 m% j( }8 ?; k7 N" L. s- ? - </select>
% G% q" `0 `8 l3 o2 s! h - , n2 i- a1 I5 T8 V
- <div id="output">
' ^: P7 B5 F( | - 选择的网站是: {{selected}}
8 Z& C7 R6 c9 g" V8 g - </div>) o+ i! @" Y+ A- X& h& n% _
- </div>2 k+ B- I K! |* c
- % B2 N- k* m9 P! d/ s' ~+ r
- <script>5 @, O$ N$ f; k: ?' s
- new Vue({$ e; p! h$ ~% B( J
- el: '#app',$ G1 M9 ^' M9 U
- data: {" @7 \, l [8 f7 J) K, A
- selected: ''
/ w& G' O1 o( X* B% a0 K0 f - }
( V1 e% K2 \! ^1 h* w - })
: Q9 h' s j" _: o" r% V4 g - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
: k% `) t b. f$ m3 t; { - <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({
, H6 ?% r ^, k( c' c$ { - el: '#app',
" \( Q [/ x8 b) z9 s1 e2 J - data: {
/ T/ A; u) {: D6 | - checked: false,4 @- J$ e1 `% f2 X
- checkedNames: [],- k. O G2 b# `5 S K4 Z. N
- checkedArr: ["Runoob", "Taobao", "Google"]
5 d8 b7 x( C& ~- H - },
; Q& J% Y. S+ R8 }0 a k - methods: {, o# s i; J! V3 n
- changeAllChecked: function() {0 ~6 i7 A* d: |
- if (this.checked) {8 f- \7 R! r& }5 h8 l& w
- this.checkedNames = this.checkedArr& ~* {! c5 c! g4 J
- } else {% e4 |1 P0 O( ~3 l. i7 {
- this.checkedNames = []
. Y& ^# B4 O2 E! j" e - }5 z& z6 y1 C, N h
- }
o8 K# q2 `0 O0 C- ?2 y4 e9 X - },
2 t" `" |" V- b3 G3 h - watch: {
" U; s1 e8 { N# {! J - "checkedNames": function() {
& S5 p2 {" g x/ d# q - if (this.checkedNames.length == this.checkedArr.length) {4 A/ F# c3 s1 I
- this.checked = true6 w. t$ D+ `3 V( N3 y% u0 F( |9 O! Y
- } else {/ c' t y4 O; O9 f7 L, O) u
- this.checked = false0 ?, `6 ~1 S: F8 i' b
- }
: O) w# e5 Z/ a* Q1 R- R - }
1 q6 \9 T3 `0 V; ~- S - }
/ e4 T* Q; x4 }# V e - })
复制代码
# T4 R; A, c) r' \
9 g. }1 n6 ^8 |* M5 v2 P- u' o$ f0 |$ v' b- s; ?
# ?& O& X; p/ G; ?: ?
% m( B7 V% M- a. T. c% _2 r+ P
7 n9 v; @4 h6 Q" U2 z/ j0 c+ r5 V& ~* r5 }! b/ f4 I
( g$ W! R6 C3 U: \' L( m |