这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: / R5 w. B! h# A! t h \4 q
- <div id="app">
! T, `9 b- f2 F6 w4 V - <p>input 元素:</p>
4 z* l, m. A9 e( y - <input v-model="message" placeholder="编辑我……">
1 k; W" x( r( F3 q8 x6 t9 M) w - <p>消息是: {{ message }}</p>
& r- A j: S1 ?/ G - : P& Q! t; {; P# K9 |1 Q: d; A9 \% L
- <p>textarea 元素:</p>8 A! M, p. w- C
- <p style="white-space: pre">{{ message2 }}</p>
1 ?" q3 q O8 b9 a - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>/ C) }6 M* r* d+ _4 X, t1 a
- </div>- }) @; i( B; [+ t! l
-
! ^6 U$ x1 a* l' m$ T - <script>
+ m, _! C7 O5 o8 P# i- f! d - new Vue({! Z& X1 ~( k5 J5 |
- el: '#app',
7 z, v" a/ O. \' q1 f$ I: ?: U. v - data: {
1 r3 s& l. F: p& a8 ?, e - message: 'Runoob',6 f( X# Q% F3 b3 X1 J1 g
- message2: '菜鸟教程\r\nhttp://www.runoob.com'
. y. w& d3 l; ^3 k: E1 Y J - }
* O0 t# [% V9 c$ Y3 D8 q* v5 a - })6 X/ v& o0 q1 N
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
4 L b4 v% U, C' T. c- <div id="app"># p' [- _1 U; _# D2 x
- <p>单个复选框:</p>
- {/ R# v) v* E. |" D- `# T o - <input type="checkbox" id="checkbox" v-model="checked">
. W* {0 w: n" k2 N. m - <label for="checkbox">{{ checked }}</label>
8 v5 B9 U( r1 P1 g% L# f - ; d( ~# z' K7 |% f( U) h) Z3 b
- <p>多个复选框:</p>
; u1 e* c6 O5 R - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">, g; p: Y$ |9 v8 g8 N6 G+ C9 g
- <label for="runoob">Runoob</label>9 z. o& K; S" L
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">; ~6 B* R, q* V0 a1 p! ~
- <label for="google">Google</label>- o0 d- N2 [; x' V0 v. M6 b
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
# A+ n# Z4 k) v. O# b- x4 } - <label for="taobao">taobao</label>" j5 ~' \+ u* w! L* R6 C
- <br>
4 L3 `7 W1 F, M+ O$ H7 j - <span>选择的值为: {{ checkedNames }}</span>
. u$ T' E# |- y) d$ G+ W# ?9 s9 I - </div>
3 T, s- m6 {9 ?/ I - , x; e E" k" t F! l" N& A- f
- <script>
6 b; W2 ?; }* m7 ]) ]8 ^ - new Vue({
/ u4 o3 ~, q' ~0 V2 b: t8 K/ } K! P0 P - el: '#app',
- b2 @) I& @6 |/ _1 L - data: {/ X8 C; r! x* Y9 z8 J! V
- checked : false,
# _1 `0 B& }! U* [4 C( D" d - checkedNames: []* Q7 o/ @1 S% g7 F4 `# k
- }: `3 m3 p! ^- j7 j$ O
- })
7 R9 l8 _4 M, h9 O2 ^ - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
m( V8 h$ p: V2 c- <div id="app">
& @9 M$ k+ A- a - <input type="radio" id="runoob" value="Runoob" v-model="picked">' T8 X5 @# B) @/ {1 p+ {8 E
- <label for="runoob">Runoob</label>2 u/ p* v" z! i3 U2 S
- <br>
6 S8 Q, ~4 Z& o% o+ B - <input type="radio" id="google" value="Google" v-model="picked">7 ~; u2 M0 p( q1 ^* I
- <label for="google">Google</label>
; k7 V& G9 ], ^: ] - <br>
$ P$ H' ^( x* ]. R6 i4 `" \ - <span>选中值为: {{ picked }}</span>! h# M5 m$ M( u% q
- </div>4 b/ A H) m P) }; z) f' V$ l1 ~# t
- ; h% B& ~3 d3 m' }
- <script> t4 E5 Q! q x( G3 l
- new Vue({
- z% k3 t8 s$ | - el: '#app',
* {* b% D' W4 C% v - data: {
1 ?3 T3 C1 E% U9 Q - picked : 'Runoob'% S" P$ j+ o A/ s' B
- }4 o6 L6 u$ F1 G! q% W; D- X- m I, h
- })0 p/ ^/ e, K) Z
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select9 u# b* K1 p0 u& |! e) V- R
- <div id="app">0 L) a: a" L' b- B* u
- <select v-model="selected" name="fruit">! w5 {% o0 l3 \) [" r8 H
- <option value="">选择一个网站</option>
. ~) q6 k( U9 b: Z3 c - <option value="www.runoob.com">Runoob</option>
. s; P1 D) Y. l! G/ T9 q - <option value="www.google.com">Google</option>
0 X4 s% S+ ` L6 o9 Q - </select>" ]" V2 {% ]7 r
-
+ L& b& o! C4 {1 q) R! ^/ V - <div id="output">; r7 d* \- S8 K# S+ C! M( c
- 选择的网站是: {{selected}}
: o9 k u" p$ E5 M/ m - </div>1 h* P9 C% m' V9 k6 s
- </div>
' x7 F8 r& @# f" E: k$ M -
: H% \7 b0 _8 D" Z$ j/ Q8 E - <script>
- a4 ^4 n5 \* `7 C0 b5 x - new Vue({7 w1 T6 c) Z! @+ S& r# m8 V. r
- el: '#app',
' _0 a1 v/ ?2 y" j r - data: {1 R- E* J0 w6 M3 k; h4 f
- selected: ''
+ T7 a4 f! v+ x' L - }
6 y0 m6 @, n! h - })
# D: S8 J! u9 j# | - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
9 u3 L5 \2 ^* W; Y' n$ c( Y - <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({: ^# \1 b. B, _! g0 ^3 s7 q5 ~
- el: '#app',# W9 ~1 h4 L. h* e0 G7 g" {
- data: {
1 u8 r6 v' [9 t% Z% p5 x - checked: false,
% e; V3 r/ x) l" J, a( |4 w5 e ^ - checkedNames: [],
3 W& S2 [7 _6 ~# P1 z - checkedArr: ["Runoob", "Taobao", "Google"]/ Q/ H' y K7 |
- },
9 j) }1 L" O0 n4 { - methods: {
- s" v' e/ Y% _0 |, j, u* \! ^2 X - changeAllChecked: function() {
C: H" Z0 x7 H8 ]: e - if (this.checked) {
. r& D, z& t1 L! S5 I - this.checkedNames = this.checkedArr& `. F7 V7 u. n9 w2 [; [
- } else {; o* a8 [& \7 J
- this.checkedNames = []
) y9 f6 ~' F1 i: K% }7 j$ g& A2 J - }6 _+ n# Y/ t1 S
- }6 d& q$ N) a$ x& n T; o$ X
- },) ^; }2 F; o }, R0 `
- watch: {8 v1 T% v% j! Z5 M( c$ C7 Y
- "checkedNames": function() {& N! {! e3 E G0 C. q( A$ u2 r/ l
- if (this.checkedNames.length == this.checkedArr.length) {7 \3 X6 r" v5 J( J: t$ @$ O8 P
- this.checked = true
1 x$ ^% {7 }, u - } else {8 i! n$ N0 @) I) ~8 i
- this.checked = false+ l; @, d' ?/ S" c( s
- }
$ F; B8 ?9 P/ {3 ] - }+ [. d- H+ S. j) {
- }
) g2 |& L( e- a0 X - })
复制代码
% L. Z7 D( Q: B& z! g- G0 f6 |4 h! s* w/ e! n/ U* ]4 Z
5 d1 X! j; J7 v% Z
2 d$ { u9 T" y4 o/ j- H' }5 W: ?
7 V: k) {% t- P- n) l& B! P2 ]3 j- z1 k+ _5 z0 W$ i4 g' R4 {- a
( ~; r% G. z0 ]% h" g2 O
, ?+ R1 B. D$ v ~& ?! |
|