这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
' i0 b2 D% ^3 ?- <div id="app">
: y1 c8 X- q! `: h8 N' ^. a - <p>input 元素:</p>
; D) x0 g4 j3 M1 l0 @ - <input v-model="message" placeholder="编辑我……">
8 _ i( W" r5 {: U - <p>消息是: {{ message }}</p>
+ N1 B7 ^) |) _$ \/ e; E - 2 ?( ~$ U( J d' q
- <p>textarea 元素:</p>
3 @" n& a2 E" s* J( d7 {1 H - <p style="white-space: pre">{{ message2 }}</p>
( \- k* G I0 [ - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>3 j2 A9 q5 O# E) q( e+ X7 N! v
- </div>0 v- S) e3 ~$ \
- . z# }# K8 b$ Q
- <script>* ?( A" {: f$ @: O
- new Vue({1 Q" T6 @5 r% k2 ~! C& E
- el: '#app',
$ M% `8 j2 ^- S% w" l4 ~( j - data: {
! a2 n% y& y( K( w! S* t - message: 'Runoob'," }9 |. g% ^- P9 ?" T8 f5 K$ z: L
- message2: '菜鸟教程\r\nhttp://www.runoob.com'
- r% J4 v2 Z3 x3 N% q: O1 _ - }
6 |& i8 k( q; J o0 J - })0 D/ I' b; O% ]+ q6 Q
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
( O) S, s9 p5 D5 r _- <div id="app">) \/ w: D$ }, c' V+ w% |' W0 ^2 K, V
- <p>单个复选框:</p>$ ?7 b: j* h# N! L4 |3 M4 {
- <input type="checkbox" id="checkbox" v-model="checked">
1 Y+ Z8 }2 Z. [, x& |. Z* x - <label for="checkbox">{{ checked }}</label>! {2 R6 V2 t1 J" ]
-
( {* E1 W. D/ s0 C- O/ y6 d - <p>多个复选框:</p>
7 T! n; R# ~3 c9 [0 D) i+ h - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
! b3 R4 s4 |7 ~6 `9 ` - <label for="runoob">Runoob</label>
+ {( r1 H6 {5 K6 w, I - <input type="checkbox" id="google" value="Google" v-model="checkedNames">- q/ V9 O. t3 A9 V1 _
- <label for="google">Google</label>/ H7 F) L/ N$ @# j7 U, V2 b
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> N. P! m9 M) J7 t$ o! y
- <label for="taobao">taobao</label>
# T3 Q2 g2 K8 C6 ? - <br>6 ]* l4 s( N7 G
- <span>选择的值为: {{ checkedNames }}</span>; v& x, e& \4 ?' M, g% D
- </div>
* ~" g( i! u/ D' s; M/ H - ! n( @! T- ^* C4 K
- <script>
5 {% n% K5 x) b6 ~2 V - new Vue({
$ o/ z; R; K/ _- w - el: '#app',
: z7 U' Y. i6 L9 b) x - data: {% c& \4 B0 _: s! g
- checked : false,( `! T* U( A& C1 g; P, J* u
- checkedNames: []
# ?# r& Z( E$ t* z% A7 @ - }
/ k% Q" ?. y) m( x% F# h - })7 Y( ]+ {4 u4 V O
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮0 a* S! ]- h L1 F5 [
- <div id="app">
- A5 ]& g+ v/ y8 o& v; T9 g$ M - <input type="radio" id="runoob" value="Runoob" v-model="picked">
`9 ~$ v$ F2 _; x- o - <label for="runoob">Runoob</label>
- z' e0 `, ]) g s @! ~' z& G - <br>
* g$ s: A/ u! t( O8 n - <input type="radio" id="google" value="Google" v-model="picked">
( ]% ?; K* c; E& S - <label for="google">Google</label>1 H! v- X5 U" f8 C9 Z: j/ \0 C7 Q) j
- <br>
. h. \$ m4 M9 X - <span>选中值为: {{ picked }}</span>( }' S n" R$ ]- I/ D8 [
- </div>! y( H }& i( c6 w( N8 |" C |
-
2 l4 D, Y$ V6 O9 m6 d( [$ l; b; P' n - <script>- Y7 X1 T! A& n; ~- C% _
- new Vue({4 @' U c1 ^/ o1 _
- el: '#app',
7 W9 l/ ^& V8 |8 }( Z: ?0 G - data: {' F6 T$ ~: u0 w; a- f9 f
- picked : 'Runoob'' v1 k& g" k' {$ S+ Z; g
- }) X( H0 W/ k" Q
- })
6 C7 w: A% I' S* Y0 k2 n3 {6 R - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
8 D, x. J6 J9 j3 a' X% }- <div id="app">
. @4 T }3 Q3 z! s - <select v-model="selected" name="fruit">
4 o$ t, |7 Y$ c* Y" A9 J, x- o6 s5 b - <option value="">选择一个网站</option>
; S9 u9 x$ W& a$ U. F - <option value="www.runoob.com">Runoob</option>
" S' P$ }+ w# O9 J - <option value="www.google.com">Google</option>
: E' r! B4 F; b7 C R: S' Z - </select>
+ n# K( [2 G" t4 l! o+ w6 r8 z8 x - * y0 v3 l. f. P& k) F$ M, c
- <div id="output">8 r# \' @8 i8 {
- 选择的网站是: {{selected}}
6 C; i; I( v8 f& ?$ y - </div>+ {/ a! _8 d( u, z- U+ ]
- </div>
: l2 M: K# A8 n+ H# W D D- _$ w - 4 L! S6 I0 E# ?2 z# @
- <script>& P A. H7 s! R( S, y
- new Vue({
+ \! T$ G5 U. |4 g - el: '#app',# x5 w$ _( y) {' x2 m
- data: {# e6 e; Z7 R4 E3 H: L/ e. m
- selected: ''
* s* P4 B( r! L" c X3 { - }
& x7 h+ \3 D( T( t) a) R - }): |% G4 Q4 R5 {* S. w
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->0 q- s# R& O& a( E; P3 w
- <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({
* c- F, B; {. |4 x' l& T7 C+ | - el: '#app',) u; J5 r1 U* l
- data: {* u6 |( o( P& ]- y- Z H* c
- checked: false,
4 S7 P0 g3 B7 y( v4 w& [. o - checkedNames: [],
6 _( V9 H# \' h; L - checkedArr: ["Runoob", "Taobao", "Google"]
* M0 |' h4 O3 q+ V3 N - },
) A w4 I. ?9 Z+ g% N1 _4 s% [ - methods: {
( i1 S( j* J1 b8 i - changeAllChecked: function() {/ s) X& ^! ~: b- g/ i0 `8 f
- if (this.checked) {
0 y) d6 s1 @% W# J/ l0 h; X - this.checkedNames = this.checkedArr7 M0 v& y2 k' r7 b# C' h
- } else {
9 ^) U% p: D0 [$ s: S# d" @ - this.checkedNames = []/ r: [3 ?9 o9 y6 N
- }
6 E9 [+ D) w% a8 b - }
, Z4 \+ ^! {% N! Z - },' N. ]" k K/ D% q9 ?
- watch: {9 \/ |/ l( v6 ~
- "checkedNames": function() {
+ K& K) Y" H' M7 N, R! s( c - if (this.checkedNames.length == this.checkedArr.length) {
% n& _6 V! \9 b- L5 }& I" c - this.checked = true! C9 | w0 c. `
- } else {
- G) A: t; y5 }' t0 W. I* l3 a - this.checked = false6 H# }* s" i9 Z( g, @
- }
2 I( m: x3 f; ]! j$ ~) Y - }
1 j2 G! w# U9 V8 y/ ? - }
( x9 C* q; n% p" m. L - })
复制代码 % h* Z6 A. E: J5 v0 @0 {! o
9 e5 l: K0 c: b. I; r3 h* ]
8 u& K8 Z( d" Y/ `8 F: T; S
5 P: G5 \0 T. l+ q( V7 O3 @# [3 e9 o, O P/ q( L/ R7 Y6 q6 P% d
; Q/ ]: ~3 }! \
" m0 \' `' Q1 q2 R
8 Y, U- z! Q% g; } |