|
这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
! W' k* S7 i. ?' c/ s+ U( W- <div id="app">% K8 k: O& u# N5 c- ?/ O
- <p>input 元素:</p>7 e( l0 x8 G5 W) v/ I/ k
- <input v-model="message" placeholder="编辑我……">
, @. Y2 S/ i* k/ N# x, z9 c - <p>消息是: {{ message }}</p>3 b% ?% y1 n9 g
-
; c( I$ Z0 }! b$ u% b5 { - <p>textarea 元素:</p>
8 W8 ?8 e1 x. C5 x# ~" G - <p style="white-space: pre">{{ message2 }}</p>" s8 [6 v; }& M
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
# J; A' A! Z# A! I8 I8 ~3 W - </div>* S; Q2 U; m! W+ u( Z9 g2 R8 K
- 4 \' d/ D8 n6 M8 `2 v5 b& X
- <script>' M/ l2 g3 t( K1 v" [ g1 N
- new Vue({
; b/ q# W9 r# G4 a4 A - el: '#app',
" }5 e6 Y w9 ~8 D: T5 k1 G. T - data: {
$ p" G' v. x& N0 n# E! u& d' v( F - message: 'Runoob',
! `1 K. M7 [! ~" v - message2: '菜鸟教程\r\nhttp://www.runoob.com'
# ^0 k* g' J2 B' {- A - }
T* E& O( {9 _( g4 y! N3 y6 g5 d - })
3 Y* e3 G1 E( R1 d; Y& t - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
9 t( I6 |" x9 b/ y% C& h! v$ W( B: V- <div id="app">: K [& n) A4 [# h \& Q, B
- <p>单个复选框:</p>
9 J. B7 i/ M: b- D) f - <input type="checkbox" id="checkbox" v-model="checked">
) g% H- {7 U7 p- d/ v- ?- A - <label for="checkbox">{{ checked }}</label>( m* R% g) G& e) Y0 F
- 9 R9 O: T1 a! R( x1 L+ K" i
- <p>多个复选框:</p>
! L7 Y4 d( a* x; C5 t - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
- Y( p6 b: y! H( x - <label for="runoob">Runoob</label>
' Y0 v3 E6 U0 x; m - <input type="checkbox" id="google" value="Google" v-model="checkedNames">
& o) k {7 C% d; [3 ` - <label for="google">Google</label># C% v! a; ~9 `- o# Z
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
* U" [0 o7 s* ?! o# w' D3 l' ~ - <label for="taobao">taobao</label>
. i. v a! ]( W4 c* \7 x - <br>9 | l- u* y* m% {: ]
- <span>选择的值为: {{ checkedNames }}</span>/ Q7 }; a! F" b( y" U
- </div>8 z' o4 o7 V( s' V i
-
" X1 E7 v7 y; E9 }$ D( G, `- O" k - <script>
5 ^% B& L/ u1 `/ Y* @3 H - new Vue({
* L0 X0 R, h3 }# L5 U - el: '#app',6 {' E, r8 j( n* V
- data: {2 }, F( b+ e1 U0 E. Z/ ^
- checked : false,
& S# ^9 r7 s; u$ x" F t/ P - checkedNames: []" j' `. z+ X& t% A1 o
- }3 i% y9 Z8 f$ f+ L' C `- c6 a+ g
- }), b8 {6 r! h! X
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮4 I/ Z% k# h; S* o- g0 n
- <div id="app">( l9 k, L4 c" }: d4 C* ^' ]
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
5 C2 [, P0 l( T - <label for="runoob">Runoob</label>8 u3 K( h& o% N) x' C- k( M
- <br>$ D. c! a7 H' X- k0 y8 n6 _
- <input type="radio" id="google" value="Google" v-model="picked">
8 X3 C0 Q/ N2 G; P3 b" S1 N - <label for="google">Google</label>
) \1 C9 s' a! x9 R- q, b - <br>
& \! U9 n4 W* r - <span>选中值为: {{ picked }}</span>
5 O, Q: G6 g$ b; ]# x! w3 ] - </div>
/ G: r& Z- h V -
6 e s2 z7 c( u/ i - <script>8 J6 S1 Z) h# t X, r# c" J
- new Vue({
6 F5 w) k. N- p3 d8 |/ D% g - el: '#app',
" H. [8 v9 b t& C - data: {
+ x$ E$ G) X) {: i - picked : 'Runoob'
7 _! a: K7 `8 |. |: G3 i6 x7 m - }+ K* R: I$ s$ F) E( M
- })4 `1 N# b5 z3 Y( L+ R
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
& c" `4 P6 Q. p( i8 p- <div id="app">' X% V0 C5 @) q/ P" _; v, X
- <select v-model="selected" name="fruit">
/ T6 T+ H8 g# {8 R2 t( G - <option value="">选择一个网站</option>
$ ~' d; o* X! X! ~ - <option value="www.runoob.com">Runoob</option>9 C) W& M5 A1 \' H1 L B9 ~
- <option value="www.google.com">Google</option>3 [# v+ F% Q" B9 k7 o4 K
- </select>
- q3 H" d$ `- i( L" K -
, L0 F& q! i4 B( @+ e1 N - <div id="output">! o7 U4 {+ t2 i# w
- 选择的网站是: {{selected}}
2 l4 D, [8 c( k/ x9 N - </div>' O& l; q/ `" S& h/ e0 [
- </div>, @+ H) q: N' ^$ ^' o3 |0 f+ _5 l5 O
-
3 Y$ |* G: M/ w - <script>
% x- u5 {. l/ E) P& M - new Vue({0 d% Z7 C/ I! Q/ Y" e/ x5 v9 N4 D5 A
- el: '#app',
) M* a7 y2 R+ @) F: L - data: {1 e/ E/ s6 [; O' x
- selected: ''
) y, P4 s* M: N, E8 ]. B7 T: I1 ^ - }9 E8 V8 @" }6 o* J) ?/ U
- })# }" ]$ n0 W2 h" b5 V
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
. A$ l* d; E% c& \% ~$ T/ f - <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({+ C2 \5 C, P" e3 C0 Q
- el: '#app',& w+ f: D3 |: _' G. q
- data: {6 z& ~' H( f. D0 Y$ Q- V, b+ J
- checked: false,
4 C' h! R; }( W: z - checkedNames: [],) D8 m" t& K1 u/ B5 Y# O. D
- checkedArr: ["Runoob", "Taobao", "Google"]9 H# ^$ t% F2 [+ y8 l; B
- },
4 Z- @% d1 ~8 ~5 m$ z, m1 T - methods: {
" U7 d! d: y) @+ o& S# m - changeAllChecked: function() {
5 Q% U# G' B0 s6 \3 h - if (this.checked) {
) y. ^" W0 `- b: f - this.checkedNames = this.checkedArr
5 f1 M8 Y V" r/ I( T. Z8 \ - } else {
4 B) f9 [) }, v ~ - this.checkedNames = []5 f$ {/ V% P2 x# b! J' K i
- }
2 r- e9 ]! }2 ` D - }( D8 ^3 f* v2 P/ t% [; `3 e
- },
( N* a1 e4 |9 d, G# S6 i* R$ f1 | - watch: {9 \1 X7 V5 ^) n; N: x T6 \8 G
- "checkedNames": function() {* Y0 _0 X) C2 e$ w% g+ \3 u
- if (this.checkedNames.length == this.checkedArr.length) {* @1 O$ Q& R `: p4 Q
- this.checked = true+ e5 c# ~- W! d6 p3 r
- } else {
7 K, e$ Y! o. Q5 {& ^% g' F - this.checked = false9 w2 l+ u& k% _( h* H. R! x
- }
6 M; U" s! f7 N2 B - }& w' |. v) G% x2 B, t; [
- }
& ]( ?7 W3 I8 p: |1 a P; [/ k - })
复制代码 - o% K% ` B$ T' U/ r c% q* I
~/ r. `2 [; i* _5 E
2 x P% |) q- Y- ]( c" _
' p% A% M2 P* V$ U) Z
% `9 ~+ o$ S5 x2 K) A: {' f
n- F. J7 [7 R
1 r9 f- B) L9 l7 o/ q- p6 s* u5 t: X
$ z+ o% s! \2 q' c$ [7 I4 [, C |