这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
# D( ~% C: ^" S. d/ k0 Z- <div id="app">
' E, @9 M) ?8 x+ A3 v; k - <p>input 元素:</p>
5 `% D# v+ _3 b* G" N: x/ ^ - <input v-model="message" placeholder="编辑我……">2 t; [& B+ f- i1 \# y% C; y- M$ n
- <p>消息是: {{ message }}</p>
8 l9 T2 P. h& C - ( y( Y% x- ]( n5 G" ~
- <p>textarea 元素:</p>* b3 q1 e& s3 ]$ g4 g- j' r, B9 c
- <p style="white-space: pre">{{ message2 }}</p>& g# S9 Z% T4 O4 e, ^& j m& I. [
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
, Q9 F# v: t: ` - </div>
% i' U K- m( f8 p - ! Q0 x2 H8 a, g
- <script>! @& G0 W" u8 [2 ~3 g% R
- new Vue({4 d* C8 h D- L% e: l7 w- F3 F' G
- el: '#app',
4 U/ b8 u6 J3 ^* z" F3 @ - data: {
: |9 x& K; _# ?) |; }# U% W/ I - message: 'Runoob',
/ Q; y! U# g# a4 ^: a( F- u. D - message2: '菜鸟教程\r\nhttp://www.runoob.com'7 ]' |' E2 Z3 ?' y
- }& x/ g0 x: o' q* ^: K: F6 X5 b
- }). J" W8 w3 X, w' u
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: ! J1 z/ z I8 y& F& {+ j, {" J
- <div id="app">9 A, L: v. }) G. p% T$ w: p
- <p>单个复选框:</p>
& ?3 q9 S7 t1 V% Q8 X - <input type="checkbox" id="checkbox" v-model="checked">8 Y5 N. h7 v, ^) I) d
- <label for="checkbox">{{ checked }}</label>5 \' l3 M% ~- U% F0 H1 R) n
-
* K$ I7 C6 t8 t' |/ ] - <p>多个复选框:</p>& K# h9 |! b; R/ L
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">5 y1 K0 {8 t4 w, U5 v
- <label for="runoob">Runoob</label>7 I# y+ h# c% C% o; d, m4 `) a
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
) V# T: j T3 @( j - <label for="google">Google</label>2 g3 g. P8 |) `& O5 U7 V
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
$ Z, p0 H4 }- s1 _ - <label for="taobao">taobao</label>
8 g, u" N8 \ @- [/ r - <br>
: W$ g, C: r, Z - <span>选择的值为: {{ checkedNames }}</span>
1 k6 v! F. ]/ R9 \7 @1 @& G, R - </div>9 P" y3 R" X3 d4 J* r6 k1 U
- - i& P! L' X$ J
- <script>0 H# \3 c$ U# G+ _$ z9 s; W
- new Vue({
+ N% G! G4 h7 a7 {" N - el: '#app',, g& ]5 A% j9 E1 s% Y5 }" ]
- data: {
6 N" x& d# B; [6 j. K n$ {7 r5 I% t - checked : false,0 [" G0 u0 W9 y6 Y) t
- checkedNames: []
" A( O8 H8 K- I0 d) `1 `- I - }* x5 G( e- @' X1 C5 |9 ~
- })
. n& p- k9 R9 j: l) d0 X - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
4 i$ }5 S' }2 U- ?- <div id="app">; B) g" d4 Y! v8 ]9 u6 F; f
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
$ y' l7 |! ?- K% U" {! Z - <label for="runoob">Runoob</label>2 K; _, v5 ~2 G% q& I& S+ ]3 Q1 `0 r
- <br>
& f g G; }, x$ e, y" z8 k - <input type="radio" id="google" value="Google" v-model="picked">& B7 H( P ? i8 p. r) j
- <label for="google">Google</label>
* I5 s7 P* i s. U - <br>
! I6 j# U" Q& Z M, S0 F* P+ {) l - <span>选中值为: {{ picked }}</span>
) ^# k% y( o* g" Z8 u2 { - </div>
9 }8 ~% g% z; F* J; {' O - + Y& e2 g( Q. |, s* M; }& K0 H
- <script>
% a3 @ n$ l9 j3 y - new Vue({' B* ^' w7 F, O
- el: '#app',
+ U0 N4 w+ H. e* k, W3 k. V* h - data: {
8 f$ P6 _9 A4 @/ p - picked : 'Runoob'
9 t7 I0 s) h. w3 f% r& I - }
6 h* L0 O! s$ [ - })
& \0 l- x8 m2 k$ C0 |( \ - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
# o* j/ o5 F0 R: x7 i7 z- <div id="app">
* f- f8 ^/ r: i6 ^ - <select v-model="selected" name="fruit">* ?& G. S6 t8 Y% `2 P7 d/ Q
- <option value="">选择一个网站</option>
: z6 I! H7 |# {5 n; v - <option value="www.runoob.com">Runoob</option>/ W( _# N: x2 K4 U
- <option value="www.google.com">Google</option>, p3 @3 h$ } D- M5 O3 U, ?
- </select>
0 e: t7 K, Z' C" u0 e -
$ w) v4 r% K# l8 P* r - <div id="output">( n! B+ u, G. a* k; `
- 选择的网站是: {{selected}}
2 i% n7 m2 m1 U4 q - </div>
" M; j' h" g4 S* A, l3 m; m - </div>- A( @: N0 q: f/ f% b9 m
-
" i7 `, G/ y8 ?+ v7 n - <script>4 T* C' U( @1 p, }, T5 ^( D/ A. }
- new Vue({
5 U& J) ]0 [* [' u* a q! C) \7 b - el: '#app',
/ |; b$ q. [* H, X% w8 ] - data: {* R! d Y' E6 M3 p1 _3 _
- selected: ''
7 s' L% H" T' J* U - }* p/ e$ E+ h& L. w* L3 z' m7 ]% g
- })4 ?2 [9 p! r6 V. \7 X A' Y
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
, ~: S" G+ M9 P. D1 E - <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({
8 J, U/ g3 ]& E+ @) U u2 x' z. _ - el: '#app',( P: g. R$ [9 h
- data: {- s5 q5 T. t& @3 x; S
- checked: false,
! u5 I. i) J; X% h/ P; n) c1 O" p - checkedNames: [],
( _$ ` y+ p* l P& j& w1 A - checkedArr: ["Runoob", "Taobao", "Google"]- P& T$ _1 t' {) p1 y: A& I
- },5 G! y' s' r' P D' K5 V
- methods: {6 l/ U5 B, F! K
- changeAllChecked: function() {+ f/ C) S3 a: Y+ Z. Z0 {
- if (this.checked) {
/ P; O% W3 g/ d6 J- b, k4 B) T - this.checkedNames = this.checkedArr
5 M/ N3 n2 a- h# n* a7 z3 D - } else {
- K) |7 G: L7 C5 }. O - this.checkedNames = []8 m2 F& D6 A3 P7 N/ W* v/ V
- }& }7 w6 D4 o+ ]
- }
0 `; R/ ~7 |9 w - },9 F* G( d, F5 @9 T: o1 ~. O
- watch: {
5 [1 ?4 w. W/ K" H# B" Y - "checkedNames": function() {% [/ m1 a/ X9 _ J7 {
- if (this.checkedNames.length == this.checkedArr.length) {1 Q+ t3 E' |2 S& L' k2 b
- this.checked = true
5 q b. x5 V% P, M o) V; J/ s) E/ b - } else {3 g$ C! ]: R5 v$ N5 G' ]) n
- this.checked = false
: D) _! ?/ k) r$ `( T2 U - }+ ~, L$ Q. y9 M* W/ n; _" Q, `
- }* m4 }* k6 B' O' d
- }
; Z2 C4 A5 y% i& @7 y% X; X' y- | - })
复制代码 4 V7 j7 p0 O' h4 ^# C: Y) T: e" a
! ]* W* v+ h4 Q: p; M
" e- L7 [/ v" T* Q. Y# x
5 y& I$ P* s/ o( i9 c; ^7 V
8 n) Q. g+ H! k, G' h5 c9 x; Z# R; m8 n3 @
6 V# e0 H( v+ w" z' B4 u3 R1 {$ F6 k% [2 I5 m9 l
|