这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: * M' _! U: [; u" R B9 J2 w
- <div id="app">- t+ ^( \- |3 A3 W
- <p>input 元素:</p>
" D* A K" ?; H' L# J) X - <input v-model="message" placeholder="编辑我……">8 S' c$ E4 a2 l7 F0 q
- <p>消息是: {{ message }}</p>8 n% K* C. l; p* {& m" x/ \/ |
-
8 w+ g" Z8 [/ A8 H7 {& i v& j8 I - <p>textarea 元素:</p>
8 L& a% G3 V- D; u! m4 R, F8 w4 k - <p style="white-space: pre">{{ message2 }}</p>
6 k9 `: V3 W F- n3 m' o. N - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
; U# I4 s9 o/ Y( x/ w, R - </div>6 G( [+ h$ S7 i3 f! E9 h
-
. p4 P7 d* Y+ Q - <script>% z' M r/ W+ O2 ?2 F& A2 N
- new Vue({; n4 `, N! x. h b# P- U' F
- el: '#app',
+ O: n* `4 M5 S - data: { ]( P! U3 V" f' ]3 b. ?
- message: 'Runoob',
% ]) o1 M4 j, n/ j( ] - message2: '菜鸟教程\r\nhttp://www.runoob.com'" R5 v# o9 h M K- B) j" c( m. X
- }& p# L5 S8 N0 d' L- Z7 Q1 O
- })+ q, U$ P& i# r6 O, Y
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
4 r" X/ ]4 u3 \- f0 U( S6 V- <div id="app">
* i ^7 n# y5 L c& Z - <p>单个复选框:</p>0 W0 D4 |& t8 F# a9 E( n5 @6 D
- <input type="checkbox" id="checkbox" v-model="checked">. M$ `+ K Q0 m% l0 J* `
- <label for="checkbox">{{ checked }}</label>
, l* H1 D% \9 p' p - " |8 Z2 S: [- @/ _0 \- ^% M/ a
- <p>多个复选框:</p>. D3 m, [1 y. n9 _7 F+ J5 {! A o( D/ B
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">$ Y' `+ k1 v# Z( F
- <label for="runoob">Runoob</label>" r. R+ I: S( {" e# U
- <input type="checkbox" id="google" value="Google" v-model="checkedNames"># I c/ l6 R: A8 S( o
- <label for="google">Google</label>' d% R# Y0 B; {4 [
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">! I, E a r. z9 K; T# ^5 k' [5 ^
- <label for="taobao">taobao</label>) V+ P6 O! K2 Q" A) ]( E0 \
- <br>
4 U$ }; D% ]3 Y' U+ \. y - <span>选择的值为: {{ checkedNames }}</span>
0 e1 p, V9 X2 l; X- G0 m - </div>8 ~* l! c' z7 y
- / U! Q5 {# ]2 v! r: q8 L; y
- <script>
& I& h$ `3 b. k p - new Vue({! G+ @2 C' a1 S; D R. k4 I. j8 A( d
- el: '#app',; ^/ f# p" z# ?& ?
- data: {) c( W5 ]# [5 q6 v9 c
- checked : false,
, E* i9 k6 r& A - checkedNames: []& b$ _& I( i6 J6 {% p! W% `2 S
- }+ X: V1 o/ {9 N4 O( g
- })5 e( h- U' l! e' ~& R8 v' Z
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮8 h! q7 B# V3 J) w- U- C
- <div id="app">1 c" f2 w# W- L7 m7 a7 A8 D: u
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
2 r! g, J, B X - <label for="runoob">Runoob</label>
2 d8 m; ~ d+ L- R' D - <br>" G2 X2 E4 ?% a/ E" l) j% [
- <input type="radio" id="google" value="Google" v-model="picked">
p' u8 }7 ]7 }6 p - <label for="google">Google</label>
$ I( R) |& t& Y# M- M - <br>
! {7 t; X/ _2 F( K. { - <span>选中值为: {{ picked }}</span>* U: r; d# V. T, e" A
- </div>2 b3 F( }1 ^$ G) r# E
- , }+ j. e A# \3 N2 r2 ^
- <script>1 ^- A$ t5 N' K/ A8 l: l( `6 P1 l
- new Vue({
) b2 q0 M0 o% E/ @- T) ` - el: '#app',
6 N/ @' z& f. k3 Y9 _- G - data: {. Q5 `: x( S3 p0 a$ h9 [* e, l! K
- picked : 'Runoob'
8 q" \3 A9 U; ?5 K - }- S+ e1 l1 j8 Y1 ]- a
- })" d) Z: W9 A! d g" {
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select" ^- F2 y& s& T$ _
- <div id="app">
! D( ^! f6 I" e0 R - <select v-model="selected" name="fruit">+ E v# j$ E* `/ E% I! |
- <option value="">选择一个网站</option>
# A) Z8 _, R5 s - <option value="www.runoob.com">Runoob</option>( J; K4 u5 j& i8 g4 \' [
- <option value="www.google.com">Google</option>
; G1 L0 ^0 k$ @! q+ {: J" [ - </select>+ F, C& c' Z; @1 p* j9 ?
-
& z! K% T7 R$ ~# ], o - <div id="output">
- U) F9 R2 K2 E - 选择的网站是: {{selected}}( y8 \/ n/ e2 L/ Y$ V5 a' y
- </div>
+ U$ i1 L6 x" Y# I5 `7 e - </div>, `) C/ F: n0 Z( |: D8 j
- 8 `0 \4 X4 f4 ^1 H }9 t. r# f, p
- <script>
+ p2 k. y+ R; R - new Vue({
1 J! N) L5 I# | J0 J1 ] z - el: '#app',
( c; X0 B- m/ G - data: {
9 ?/ h7 ^1 j5 f# z0 a - selected: '' , m4 b3 M. I( P6 G! L' K
- }% }4 _8 ^0 [- A# }* W9 N
- })
) c! M/ c! j& L; d5 c1 H - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
: H6 X) ?9 {4 C6 ]& e; b - <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 n1 N7 R+ D2 d) h8 { - el: '#app',
4 s- Z8 P) x1 I; Z3 l) A _ - data: {; o3 `5 w3 N+ m* z" W
- checked: false,, r+ X1 Y( w3 v4 m0 z
- checkedNames: [],; z- I- [8 t2 B% ?' K+ @$ K
- checkedArr: ["Runoob", "Taobao", "Google"]
4 @: i7 p$ Y) o - },
! r1 F* Q9 L- S& c. ^" ~ - methods: {4 G6 c" N& A" j) C6 X) p- L& Q
- changeAllChecked: function() {. P. V3 u6 C3 e( [& X1 W: O4 X7 e
- if (this.checked) { q. y- u# D0 Q& P9 y& C& i
- this.checkedNames = this.checkedArr
- G, m3 R' I( ?% ]9 D: L5 m3 m - } else {
: Y8 v8 C; V% O6 ^1 B" f+ B - this.checkedNames = []
# H) c5 Y" T$ Q6 ]8 R/ ] - }
# B$ v, F8 W+ a8 e$ m' T - }
0 ~: G7 }! L* h( {$ k8 A, a m2 _' v6 ~1 u - },
4 F' G' \. l7 F" N - watch: {
, l/ L d8 I* n- k - "checkedNames": function() {
% U. K. S0 R& p& D - if (this.checkedNames.length == this.checkedArr.length) {- H9 X4 p! `0 [2 g* k" B
- this.checked = true
) r/ a5 o9 s9 ?+ u - } else {2 W, _7 A8 G9 i5 A; |- o, C+ q
- this.checked = false
1 X. D6 f q! q- m2 {& } - }: A" @/ C: G4 y( g$ W& q7 ?/ x! n* v
- }, _( m2 }: R: R2 L
- }
4 Y$ {' j6 T" |$ Q - })
复制代码 * v) Y: T/ D' _; D! z
, K* k7 n3 u e W# e
1 A8 y* G4 }$ m
4 E! U/ p4 H Z/ ]" @3 H$ p, e
! _$ O* N. C- _/ Q
8 W6 c0 [4 E- g- ^6 A, {8 `8 j6 H) t) z
& g( O8 z V' a7 T# e |