这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
2 `4 b0 j$ f, N- <div id="app">
# C+ I6 L0 S% ? - <p>input 元素:</p>
8 @+ C$ }2 Z* K0 q - <input v-model="message" placeholder="编辑我……">$ H1 H: v& c- _
- <p>消息是: {{ message }}</p>6 y: x0 ?" _2 O2 b' b+ @
- # L% s: `( k8 y. i6 [, q3 q
- <p>textarea 元素:</p>: O- U4 Y0 Z( ^8 G: a; o
- <p style="white-space: pre">{{ message2 }}</p>
8 M( t0 n; d( r. n5 G - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
2 }7 K1 S6 [, [* w - </div>
3 W: ]' W' I5 `3 t -
7 A7 D) y! C1 Z/ g' } - <script>- _0 }# I3 e! J7 X8 |8 j
- new Vue({
$ H+ R+ b5 }8 r* u - el: '#app',
/ W' H7 A4 v7 p) z - data: {
9 E( `0 }7 A8 I8 T1 d - message: 'Runoob',
- I* M+ I+ X# \& p/ ` - message2: '菜鸟教程\r\nhttp://www.runoob.com'2 B6 p& c( l7 ~7 Z
- }
+ t4 d9 `7 ^9 W7 E5 T* c- s) V0 Q! ] - })/ t$ k) d" i7 n9 n$ F1 Z: J
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
. R" D* S& ?9 f- <div id="app">4 j0 i2 x* [$ f. N- E
- <p>单个复选框:</p>2 n0 C4 B. {9 s% B+ {5 n
- <input type="checkbox" id="checkbox" v-model="checked">
5 b7 |" U) k# i - <label for="checkbox">{{ checked }}</label>
' [* U f8 O& Z& T8 s7 b; ?# W -
# c* P. C% H" q) W" I }! A - <p>多个复选框:</p>2 I6 i$ S3 I8 a( G
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">, X( v/ f- i! s3 e" T
- <label for="runoob">Runoob</label>& o! K p+ v4 f4 @' ~
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
" j0 I7 t+ q N# @) F2 r - <label for="google">Google</label>
9 h4 ^$ `8 s/ N. O" s& \2 p2 C- @ - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
( L3 l- X$ D4 |: { }6 H4 G `0 j - <label for="taobao">taobao</label>
, w+ q" m2 o+ }. i9 D - <br>
6 L# c9 H- Q- u" X - <span>选择的值为: {{ checkedNames }}</span>
3 i r+ a0 W6 [+ [. _ - </div>
3 ?! p9 J, L/ i' I! h - ' p3 ?+ ^, r4 b& B5 j7 @. [0 @9 u
- <script>
5 c+ ^2 Z% R9 h; `- k8 ~, W3 t - new Vue({; g& J" _ M) k& Y5 f$ F6 X+ n
- el: '#app',* |1 }3 b, G/ a( R1 q4 [4 Z
- data: {6 D2 E) ^+ @( a
- checked : false,
# |) L7 X6 }* l/ X4 X - checkedNames: []0 A+ |8 [' M" L$ w, ?- F. F8 F) O
- }
7 j$ U9 u+ Y) s' ] - })
% k& I8 _( l: C8 a3 S - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
. B3 `+ |& v' U7 `- <div id="app">
) \ C4 _' p1 T2 E. k8 }* m1 @5 W9 p0 j - <input type="radio" id="runoob" value="Runoob" v-model="picked">
1 ~) N0 M/ b+ C: D3 K( e - <label for="runoob">Runoob</label>
6 d/ `: Y; w) g. {& X1 Q, g$ d" e - <br>
& g: N9 R# n3 g1 m* G - <input type="radio" id="google" value="Google" v-model="picked"> m1 K% c6 X) s5 J, U9 w1 Y
- <label for="google">Google</label>
! P6 `$ X+ K/ R1 G& t9 ^* S) I - <br>. N2 m1 u3 U! ^4 [8 @: _
- <span>选中值为: {{ picked }}</span>
8 O1 W) U3 b) I) c4 A# n/ {2 J - </div>
! K8 x8 N- w# _9 S8 e9 T" @) v' L$ L - D4 M, J. Y* Q/ B
- <script>) o$ i( g+ n/ C) g2 I6 H
- new Vue({
8 K/ Z- a) T h2 b - el: '#app',
+ L/ ~2 R# t' u9 R3 B. J% } - data: {
% b4 |; q1 s$ p; ?" ] - picked : 'Runoob'
5 b4 Y7 ~( Z4 e! v+ d& L$ G - }1 E7 b" y( f( b7 ~% @
- }): G* O5 T" a0 `# s
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
7 \, g8 D. Y$ f$ F% D) K! c- <div id="app">' n2 q3 H3 y) ~6 f* ]
- <select v-model="selected" name="fruit"># m( {5 ~2 \! B$ U8 o
- <option value="">选择一个网站</option>+ M- s( C4 ~$ V3 `$ Q$ q
- <option value="www.runoob.com">Runoob</option>
# t3 k \+ {" b) L2 Z4 x; \7 ] - <option value="www.google.com">Google</option>
# `, q. _$ E; P% G- y |8 i3 x - </select>, j1 F, P$ ^, W' d) U
- % v9 X+ u( U) F$ D) Q$ G9 l
- <div id="output">
) u/ m5 C5 V' z/ r8 O( S - 选择的网站是: {{selected}}
3 E1 M; z" x/ [1 m; }. F. M4 L - </div>
' o/ P9 _5 E! }. l - </div>
2 ^" H0 E* W* ]# Z$ ~( L; Z - + r8 U; w @7 C9 V: o2 j
- <script>
/ E3 Z! _2 q) I q* N - new Vue({
" f6 r! y& y) I& m: b' P1 S - el: '#app',
2 |4 C; ~& n* d - data: {
2 s) V5 O+ x! I! o - selected: ''
- w) d% ]$ W" ? y0 c' S: u/ u# r2 H - }
" r5 K4 }. V ?! e$ B+ h - })
7 D6 H+ @& R3 r; s. y9 S - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
; L& |) A. \; W$ d; s( b - <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({
. t2 b0 I" N0 u# L% U - el: '#app',
, a9 R8 v! T5 Q! x1 x - data: {( `# x+ I B, X! r
- checked: false,
6 ^: Y+ ] `0 n - checkedNames: [],
& S9 x3 t6 Z: k. G* U% G - checkedArr: ["Runoob", "Taobao", "Google"]
# O; F0 G" i/ q! v; X) ^ - },
' V% S, t' m" o6 G1 G! n - methods: {
" g3 l# @* M8 n, c% u0 W" f, A - changeAllChecked: function() {8 K3 l2 R4 D5 @* L. z! L3 a- v8 J5 ?
- if (this.checked) {7 Y, f: c7 l& I/ i9 n. B! H
- this.checkedNames = this.checkedArr q6 r( x {$ O
- } else {
# f* H6 P2 L; [: x2 B0 I - this.checkedNames = []( n% q' W$ C5 W) c. V
- }+ A9 X5 M( K% P: }4 O' a& L
- }
, p# V2 z, D. N- _* e - },
* ~5 j1 `) D" v: h z: e9 u4 D - watch: {
" h/ n7 z4 u" N6 p. p) V - "checkedNames": function() {
/ S" m8 k |* t' U5 y$ S9 e - if (this.checkedNames.length == this.checkedArr.length) {
- u. k" c2 w0 k: R0 l - this.checked = true3 p# m D4 t3 U- O: j$ |& ~5 ^& t
- } else {3 p% n/ W$ {$ I- }' R+ V
- this.checked = false
* r: `1 p% t! n5 Q( t3 }7 m - }
0 ?% }' l: z4 u. `9 @1 l( _ - }5 W' b5 C4 Q8 o3 A
- }) r" C" P- Y( |' \9 ]
- })
复制代码
6 L! [, @8 z! ] [, S
" U @8 q4 }( U( C4 p6 u& p" S* X6 O/ t' T9 a, Q
* A$ g {& h# w' o& R2 `0 E& x
! U- w i+ B1 p* O; Q" b6 @% A2 U% V4 M9 ?& r
3 O# a7 h- M0 A1 O- z2 R2 B8 D
5 x* B( v- G, A/ Z9 Q; k2 T! ]+ n |