这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
! c! Y! i' ]6 U. [+ Q% `- <div id="app">. i3 Y; c" G' |3 k! S! U* Z) r3 U. H
- <p>input 元素:</p>
" k3 a" ^- e( P$ d6 y3 c. Z: C* q - <input v-model="message" placeholder="编辑我……">
$ O" j$ n! a5 C/ N U - <p>消息是: {{ message }}</p>
; L, H$ p0 \$ F( |2 s" A - & Z. f' m: P9 z
- <p>textarea 元素:</p>) x3 Z3 m. E# e. j
- <p style="white-space: pre">{{ message2 }}</p>
7 Q5 f9 z, N5 I$ ]- B - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>( u6 z3 D* z6 L2 `3 ^, f- a
- </div>
& J% d6 c6 n% ]. L9 h/ W6 s0 | - . d. X7 b' X3 J$ f% p
- <script>, N' v( Y, ~. a) ]1 o. L" w0 P) X
- new Vue({
' ^4 H ?' H! c) X2 n7 m- b+ v; m - el: '#app',
, T! i% D3 _2 C1 n - data: {. S7 |# n+ W W0 f$ F! E- k
- message: 'Runoob',* a- v) E2 \; X- |- O7 R7 n/ H+ R
- message2: '菜鸟教程\r\nhttp://www.runoob.com'% M* T7 n( Y' W; G# O: T
- }4 G0 A9 r% P! \0 X( _) A$ P
- })
+ g/ z$ v$ r: o" n( q0 n7 i - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: . T5 ?( e* h/ h. ^. P/ h# l
- <div id="app">
* V) Y* t# l4 Z6 u/ P - <p>单个复选框:</p>
, e8 V. p6 q. l8 h2 Q - <input type="checkbox" id="checkbox" v-model="checked">
' d ~0 v$ m; S, o/ x' \ - <label for="checkbox">{{ checked }}</label>8 e9 f1 q8 @+ | H5 J
- / h# l( ^# H$ X+ p+ x7 j) H
- <p>多个复选框:</p> l) M: G5 H2 |
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
1 D% I# R1 ^( T E# v - <label for="runoob">Runoob</label>9 b- m& k v1 n* F* v
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
# @9 F) u- P! J8 L1 l. g - <label for="google">Google</label>
4 G0 j5 |& o! F6 r2 Z& T - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
$ W! \7 [, M) r' w* [: E. J - <label for="taobao">taobao</label>
! v( B. o( y% b2 t - <br> [( V* f, w* ^. D
- <span>选择的值为: {{ checkedNames }}</span>
' c9 e' c8 [! D4 t9 l7 I% {& j - </div>
$ |9 a) e$ e/ u& z( H! K( ^ -
+ b+ O5 Z- b. i8 v# Q2 k7 d6 Z - <script>
6 F9 h; [) N# T; ~9 r m - new Vue({3 R3 J2 K' O) V3 F0 @
- el: '#app',$ ^# ^9 ~# V5 d" j( z' b3 d7 Z
- data: {( d, U0 B4 j u
- checked : false,
" u* \ N6 N7 Q. }$ o' f - checkedNames: []# l. h( b4 {+ Q! H
- }
2 |/ [! C( X* Q$ w9 a8 w! p; J: {8 x - })# Z" ^, z4 D8 ?2 }
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮+ R, O/ I% }) Q) z
- <div id="app">
* o4 E; l4 @% l1 }0 ~ - <input type="radio" id="runoob" value="Runoob" v-model="picked">+ [8 T' }$ F0 ]6 x" ]% T' l
- <label for="runoob">Runoob</label>
( g6 s' ?- @9 Z L+ I - <br>
) Z8 D8 _# K; k' Z9 i - <input type="radio" id="google" value="Google" v-model="picked">
5 m! n) F* o. k; a - <label for="google">Google</label>
7 W# ~- \, V; y6 T - <br>
1 ^# V1 f+ D. ~* d7 O/ G - <span>选中值为: {{ picked }}</span>
L5 ?9 m# V% u3 [& ? - </div>0 d* H3 N# j2 p3 z/ b
-
+ {- _2 k5 Y1 R: t4 S y t& P1 l - <script>! `9 ]* O6 C2 X4 c* K2 H7 R
- new Vue({# P, f$ q- _! h/ N7 Z; Q; i
- el: '#app', ~' Q( q) m; e" z
- data: {
/ S f7 v9 S- j/ u - picked : 'Runoob'
, k+ @1 a- f7 Q4 X/ d& { - }
; _% O7 Q( Z* h8 K) U: H) o T. F - })) K' x) B+ t4 w' ?6 E
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
3 [/ d+ y$ y* m* y2 ~- <div id="app">
9 L6 R* b: x; @$ Y. \9 X - <select v-model="selected" name="fruit">
2 O( {. x! M$ |: n - <option value="">选择一个网站</option>6 e, @5 b2 j- c5 m d: ?/ a
- <option value="www.runoob.com">Runoob</option>9 F/ }9 m5 r& i2 f) X
- <option value="www.google.com">Google</option>
- U- S4 |; x( U# A- M - </select>
2 ~$ L1 d+ V. e4 b' C - $ v1 U7 `6 d. E+ D( {, s
- <div id="output">! S7 q! @; {. c3 e) Z8 f9 e9 I
- 选择的网站是: {{selected}}
* h: z$ P" d$ K - </div>' Q+ q% ~' W6 r) x6 O; m+ \% }
- </div>
9 ]$ L+ J- {9 B# u$ E - - ]# Q: u+ M; r( M& g2 D
- <script>
5 d3 z/ ^ [7 F( j) H - new Vue({5 Q1 V* Y" ^5 R6 l, o6 f4 W+ M# z
- el: '#app',- `% z2 p+ b# c3 K% c ~
- data: {4 j' E& V$ H" R" ^' q
- selected: '' 2 \, M( H J0 y& [4 O5 a8 W5 H7 {! `
- }
. Y$ r, j9 U' w - })3 z) }- J8 B5 Z% O' R) m, ]% q7 D
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
1 H; M1 x* f s. V9 U% c - <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 d( f5 h4 P4 @
- el: '#app',
5 U+ h/ R/ W1 n! I* f - data: {
# e0 S% B8 Q( d- L, Y - checked: false,
0 s2 U, U( a( S3 r - checkedNames: [],5 }% u/ W% f3 M* x
- checkedArr: ["Runoob", "Taobao", "Google"]
9 F! t! Q2 e1 @* ~. E - },
w) V: u" U$ N9 K - methods: {
8 b( F8 i, M8 x* q1 f8 _! X - changeAllChecked: function() {* o* b9 e% P# y) {* X' `# @4 F
- if (this.checked) {
% d) d7 f8 ], N+ @3 d$ ?/ b. i# k - this.checkedNames = this.checkedArr
# S, R* j+ J) s/ X4 I% H; x2 ~ - } else {
' L5 q. d7 X, B' v- a - this.checkedNames = []
! J! U" E7 P" I - }8 Y, ~! K+ e( R, _3 d
- }
! d- B- X, o2 m4 L+ b9 u - },
. m/ t6 }# w' @" x+ S3 a' J/ l' n A# B* e - watch: {, x; `( ^! a* K
- "checkedNames": function() {# r0 |) ^$ N- S0 N) b A9 F7 K7 L
- if (this.checkedNames.length == this.checkedArr.length) {
+ J6 s4 F, @; ?% ] j' | - this.checked = true* I* |& O* n5 e% `/ O! K& c
- } else {3 @! e8 J/ ]/ h { Z
- this.checked = false5 b4 c# |* Q' `9 y9 |7 ^1 h% @
- }4 A8 u3 ~0 g# j, a' O0 h$ r/ N
- }6 n- Q! @( y; s1 K
- }
9 H0 y/ O: H! q/ z+ g - })
复制代码
- }& d V6 _; C6 c4 F+ Z
# o* T5 c: }4 [1 Y/ D2 y+ ]3 ?+ F# ?6 G L' g3 y+ g
7 o( |2 `6 s6 {5 c$ p' b
: V2 I, |* ]% J; P8 J! A5 y! e. e i
+ a4 N* K5 ?' l8 I5 J& v' }8 c; Y
0 j* g% Y) E! K: @% j B* ~& v2 D: k4 g2 Q' w1 s4 o3 G
|