这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
- [# `& P; f2 v' c' [6 m- <div id="app">) r& I+ y: B7 o& D
- <p>input 元素:</p>: j# ?3 X3 ^: R# ^" u" B
- <input v-model="message" placeholder="编辑我……"> h$ ]( d' X l
- <p>消息是: {{ message }}</p>' ` Y' u6 J5 k a- t2 }
-
" h* N% s/ g6 Z/ z - <p>textarea 元素:</p> ?/ K3 g) U: M `8 m; [6 N
- <p style="white-space: pre">{{ message2 }}</p>
; ^6 \5 Z4 [5 Z" A& c - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>) c, D; Z( n0 e w/ x! O6 \- y9 K; K
- </div>
* y' n% q% P# K1 B - , k# y8 t0 H) I# D3 d( e) Q
- <script>
3 Z$ f, d4 ?% p& ? - new Vue({
: e8 r, V H0 a, o. E/ q; Q. U) H - el: '#app'," ]$ I3 @& }* O7 n2 T% j7 ]
- data: {
, \, d7 j& K2 k2 A( ^, }, { - message: 'Runoob',
/ i- Q( A/ ~5 U9 s6 i/ j7 h& |3 Y - message2: '菜鸟教程\r\nhttp://www.runoob.com'! D1 i9 h8 x/ j: S' Z- h! m t9 k5 p
- }0 z2 w' `. ]& a3 S, M/ {
- })
) N) j, \9 m: j( H1 y$ I' { - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: ' n, Z+ k0 @ A! L
- <div id="app">* h {0 c% |, U) M
- <p>单个复选框:</p>, o5 H' K0 W7 g4 k7 \
- <input type="checkbox" id="checkbox" v-model="checked">
6 I+ u& f0 s; C& z: q - <label for="checkbox">{{ checked }}</label> X2 V# V0 l( ]5 n( s# R8 K
- 3 a2 B7 C1 e' _" e: j2 H
- <p>多个复选框:</p>( X2 l- F5 S* C4 b8 a* @! S
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">, y5 h# `+ ?. N d, }, @2 v5 \
- <label for="runoob">Runoob</label>) g$ Y- Z( Q, k% R
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">4 f& i+ H4 T: c
- <label for="google">Google</label>
- c4 `) \" n6 x# z - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">( i F3 a6 c* V0 c; D- v4 L
- <label for="taobao">taobao</label>- }/ |0 `. k: C" z
- <br>
+ E5 b5 L! A2 i5 c6 c - <span>选择的值为: {{ checkedNames }}</span>
# H* m8 k) m+ v7 d( o3 a) u - </div>
0 E3 V9 V+ h# x -
/ {1 V3 j7 j8 W) x. m7 ]8 k1 d - <script>
$ X5 @5 ?9 K2 X! t& M+ g - new Vue({
" S* g9 D. q H# V K+ [ - el: '#app',
% ]3 C/ o/ `. q3 Z& f# c# q7 B - data: {; v6 T# R8 [" W
- checked : false,
S+ o4 S6 ?8 {1 [5 A* f - checkedNames: []
: G5 M. h0 s t- r+ S7 V$ N - }3 ^0 ^2 r5 d( Q2 r( e6 y
- })
' A3 @+ f7 L9 L, J8 J - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
6 M2 s+ j" d9 }6 c- B' r- <div id="app">$ n: m% ?. r; i
- <input type="radio" id="runoob" value="Runoob" v-model="picked">5 t1 R% m) J# |7 r, c
- <label for="runoob">Runoob</label>
; S3 z& `: d+ |& Z. g - <br>
. H& D# y4 E. A) o3 h - <input type="radio" id="google" value="Google" v-model="picked">6 L) |4 \$ K& {6 o3 g# L. Q1 a
- <label for="google">Google</label>9 b4 a1 f* ~" n% x: p
- <br>
3 _" G) e( i( p( D, o! D - <span>选中值为: {{ picked }}</span>
+ B* b6 B$ g! w0 N: G - </div>& d' f$ {2 |( g; A
- 8 H, z* [7 m8 s: W. q
- <script>& p+ e: P3 S# k7 k& f+ u
- new Vue({: `" {8 x! \2 Q1 S7 X1 N
- el: '#app',
3 o3 q( k% |+ {$ B% ?6 Q+ T - data: {
* U% b$ p$ @ \, { - picked : 'Runoob'1 O9 ?) H6 c( Q+ p$ o4 m# G
- }9 I P1 q" q5 k1 q1 `1 o3 M
- })
6 l: ~4 i& \* r) T6 w) w# v - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
5 Y" `0 y; t' Q/ E& X9 A- <div id="app"> O2 s4 b0 C( ]8 d3 D
- <select v-model="selected" name="fruit">
& `/ }* Z- F& @; d7 ~ - <option value="">选择一个网站</option>9 b( P$ F: C9 T8 _5 u1 C, v
- <option value="www.runoob.com">Runoob</option>+ _- V- E; w7 e
- <option value="www.google.com">Google</option>
) l/ f( i; Q; H0 q8 W - </select>
$ C1 x: S9 I. s6 P7 c9 }3 V' ` - 0 s7 P4 a1 ~* ]3 T2 D5 ?. K
- <div id="output">. e+ T; C& I8 v% A8 N# w- f A
- 选择的网站是: {{selected}}
8 X) j* _% o/ {& `& } p0 {/ v8 ?, A - </div>4 b9 C# o& X& d. A9 [" b, X4 K, b
- </div>
; _) i% E+ N4 ~+ j! t; A' Y -
' |$ i- U2 k5 O' a3 r# p - <script>
7 `( z4 X7 u" P/ C* p( U+ \6 V - new Vue({) n: I0 g* m0 G4 J; }
- el: '#app',' W' X) H6 B; }4 \0 K! d2 K6 C
- data: {# U8 [: e/ f! N
- selected: '' , ~; l3 E3 |. U. k/ _' G
- }* O% g7 `+ t+ s% c
- })7 g0 X2 M4 n1 E8 {3 [3 l- X7 ^) B
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->& }' a) ?& e _' _& H9 V. a
- <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({
3 N2 U+ } a/ }* L - el: '#app',
R' r( t$ X; n& T1 q+ {: e1 {$ n - data: {
6 E/ t3 w( U- j; T8 A - checked: false,8 ]% i' ^2 _! `5 q
- checkedNames: [],' c8 W# w# a& e) C
- checkedArr: ["Runoob", "Taobao", "Google"]) l& D b4 F" v( w% W- Z
- },
) a" `8 m' }/ U. T5 h2 @ - methods: {
$ m; ^* U9 ]- n - changeAllChecked: function() {
5 t U8 t- ~- F1 Q - if (this.checked) {
& v: v2 M Z4 I+ b) \ - this.checkedNames = this.checkedArr& B( A3 Q, W$ k: C- m3 p
- } else {
2 @# e7 }/ e7 V+ A, j6 ^ - this.checkedNames = []
- B' |# J$ y, k# t+ b - }$ Z3 N; \1 Y9 h$ U, M
- }
+ y3 A, D) C e9 k4 ?7 G - },
: b9 k% G6 e1 @6 J7 ?9 w+ U. N - watch: {% ?( W% g1 U) Y/ }7 Y7 ^8 B( b
- "checkedNames": function() {
1 t+ h( }2 C! |) f4 y - if (this.checkedNames.length == this.checkedArr.length) {
# Z9 s9 D& d* G0 J. N0 U - this.checked = true
$ c0 d/ l* a8 M1 T$ i$ C - } else {; Z; L& F. c3 Z+ k
- this.checked = false
; {4 ~0 p7 C& }6 C+ G! }+ M- Q - }
4 y* H5 {) v8 _. d - }
/ o9 A4 C; K4 H7 N5 X - }
- P2 x/ ]: |& D* ?9 U- K - })
复制代码
! B$ c0 n4 A Y" d" ~- E8 s* j3 D1 Z9 V+ h# E) b
2 u; [; |% T. Q6 \2 W
/ Z0 w' t7 m7 U- h, l/ D, E, {! J
8 p' J S H! D7 Q' Y2 V0 Z1 v: b$ l$ S. z4 p; m. e
4 K% v+ w% y" O9 D; r# p- M) y1 h
4 Z9 W1 s8 C; ~! h7 E1 Z' ]$ s
|