这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: $ M# Z3 t% O" F" F/ w# R
- <div id="app">- ^, Z" q. }$ i6 p$ `
- <p>input 元素:</p>" q- l5 Z4 R9 p/ ~# ~4 |/ o
- <input v-model="message" placeholder="编辑我……">6 i1 A& D0 r" S1 O1 U9 E
- <p>消息是: {{ message }}</p>
2 B2 M/ {) T G9 \6 W -
3 O3 y2 W2 I. h, K/ N - <p>textarea 元素:</p>5 e3 v7 m4 }9 r8 S1 g8 {
- <p style="white-space: pre">{{ message2 }}</p> a' {/ ]- I+ F {( F. ~
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
0 M8 H. T, T/ y( s7 V* M* Z- G - </div>; p9 G$ E! S$ U g: c
- 8 l, i! P" r- {5 ^
- <script>
. `9 A, h, u) R% I5 j- J+ ? - new Vue({ W5 c) Z. q5 o5 Z
- el: '#app',0 t$ O9 y; J2 @1 e
- data: {
' l# O/ p1 V0 X2 M) r - message: 'Runoob',
7 S2 B4 i( X6 k7 q ~( v - message2: '菜鸟教程\r\nhttp://www.runoob.com'
& F- R5 s& ]' ?5 R) M8 G: O - } _ n' D8 ]1 i; P* r- N) v
- }): i7 o% f, Y9 V8 b; a! p: [
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
, ^6 g8 S2 s0 X+ c3 L- <div id="app">
2 _ q0 l1 c& r0 W3 B - <p>单个复选框:</p>1 p+ _6 T5 G* O
- <input type="checkbox" id="checkbox" v-model="checked">
* X- [, `' b9 [3 t' a - <label for="checkbox">{{ checked }}</label>
6 Y% ^$ F4 p/ a& \& s -
! c2 k2 a. A& f; J! E0 S4 N# Z - <p>多个复选框:</p>
: R) T3 b& {/ p! W7 R3 W8 k3 e: l - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">% f$ Q( v. O1 u
- <label for="runoob">Runoob</label>, P) ~6 x5 \& M3 @: S& @4 g+ @
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">7 j1 g6 u( ?5 L3 f# k8 s: l( H
- <label for="google">Google</label>" Y1 v9 W5 V! c0 T( K$ T
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
. F+ x8 L8 }' W, D' C - <label for="taobao">taobao</label>
4 }4 k6 U( N Z7 l8 G% K8 K - <br>; i7 c! E% }/ G& Y# b* g0 P7 ~8 J
- <span>选择的值为: {{ checkedNames }}</span>
- z# n: X- d% t - </div>" K" v* }# }* O$ p5 F! b0 G
- ' H; n5 S/ ]2 c c
- <script>
' a T; b( U$ y6 y4 s7 ?& t - new Vue({
8 Y; b* O* Q; f$ W4 d* O2 W$ c - el: '#app',
) A+ z7 d# s# Q" q1 \ - data: {
! n/ `) |8 |" o+ ~; z - checked : false,
1 w( u" F4 [) N- X3 [! T - checkedNames: []
$ W0 ^9 a9 S% ^# x1 c4 C - }
+ r$ q7 b2 O9 V7 m w5 ~% s3 _ - })/ m. y* _4 n& f9 L
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
, I0 h. @* w, E8 n- B g7 ?- <div id="app">1 j0 `- l" `0 k7 h
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
6 C+ d* l8 A0 N, n2 e; i2 _ - <label for="runoob">Runoob</label>
6 v+ n/ r: X' [; x, h# [! S' k - <br>5 d7 m' n( `6 P, D1 e. e1 C
- <input type="radio" id="google" value="Google" v-model="picked">
; o2 A% K/ C2 z6 `4 B$ I - <label for="google">Google</label>$ s& V. O0 ]+ n5 N5 ?- c; |" O) Y" l
- <br>8 y; a+ q5 o8 g$ e: M* h
- <span>选中值为: {{ picked }}</span>, g# C+ m0 ~6 i) @ I9 e
- </div>
, B. P9 {; a1 Y -
# |3 L4 ~+ `8 P; ^ - <script>% e: V' R3 ~( r2 w1 m. d& Z1 C
- new Vue({
8 a o1 F% s. \) C# r. D( \, v- A - el: '#app',
' _6 x% g- B. t9 ~) N - data: {' L' H' O6 z+ X; _, j
- picked : 'Runoob'
3 B4 a6 R7 f9 @$ f& e - }2 k& K4 v5 P: t& o9 ]3 ]* E8 i1 L
- })7 N) _/ a j+ J' v1 U; E
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
) m8 w7 H+ B. \& H- <div id="app">, ]. w9 V+ C. a9 I$ P
- <select v-model="selected" name="fruit">
9 ~5 b- m% _+ L, k% d: h6 G - <option value="">选择一个网站</option>4 i; i G5 p6 ~0 B- ?0 c) M
- <option value="www.runoob.com">Runoob</option>; v7 k7 d1 G" U3 |5 Q% J
- <option value="www.google.com">Google</option>
t" X9 I. y7 x7 } - </select>$ D/ \( A* ~& }! I0 I A3 F) o0 j
- 3 F7 D! S8 \) [& O% F* j& q8 G
- <div id="output"> V( N/ Y- _; r9 w6 y" K3 I
- 选择的网站是: {{selected}}& E7 `" r$ K' ~: k! ?! J
- </div>
. Q a! u m) L9 Z2 u g1 O - </div>4 P7 g7 u5 m9 _7 j0 z3 U/ x) X. q
- 2 _1 k: C* n2 t' \
- <script>: K! g- o" X; X" W" r k. x
- new Vue({
- S2 A0 d1 W/ e; D/ V6 C - el: '#app',. k( j. v! \2 h8 U/ k
- data: {
4 J, ^8 h9 N R' n - selected: ''
% J, [% I3 d1 D, s' g1 a - }
1 `1 w# Y; ^0 u6 l* A - })
6 r' _: y2 V$ G! J - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->8 d5 T& ?: ^* D8 Z) j, I
- <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({
- x) Z' _, c3 h; q$ {' x4 K, O5 f - el: '#app',3 _5 j R( W0 E& Q1 I- w+ h0 j% W
- data: {$ s; {6 V0 Y7 v$ `
- checked: false,7 e" E! z9 x( ^. o
- checkedNames: [],
. e9 t! Z$ [5 o9 q- s U+ j P - checkedArr: ["Runoob", "Taobao", "Google"]! _# t7 B, e+ G
- },
- h5 X2 B, H5 ]2 B9 ?4 L* D - methods: {% {2 B! }! B0 I" Q8 n" p
- changeAllChecked: function() {
x! z3 H) u" d( _8 I! a - if (this.checked) {
5 U' P# m2 a8 B' k - this.checkedNames = this.checkedArr& M8 f, \8 B& X" B9 a. c2 P8 V+ w/ `
- } else {4 X% ~5 h8 P$ o) h6 r
- this.checkedNames = []
7 W, k/ U$ e9 k0 b( u% z/ ?) t - }. R$ |* M L. P" j/ r( }- p
- }0 X3 B5 V, w5 o9 m2 @& g
- },7 n0 b3 P' \. c3 ]% n: }
- watch: {: a* C+ m U. _. S- e$ g. a" q8 H
- "checkedNames": function() {4 x* a0 E& S( C) \, W- d, s
- if (this.checkedNames.length == this.checkedArr.length) {" y9 }! ^; j4 N% v2 c. @: B
- this.checked = true' _; ?# {: z j) J" ~3 L7 e
- } else {6 F' @& G& z6 e. ~! {0 d: U
- this.checked = false& g+ W% i( @% W* f' H- ^
- }9 b/ i" a" ~3 r5 c
- }
6 v. T: j( x& ~ - }
& j) c3 E' U1 a/ |) ~% b - })
复制代码 $ `' Z9 i; e3 P
. o2 G+ @+ H' O! W) l( g4 M6 T" O! i
0 A% F0 m6 C4 {9 n/ q9 {5 T& ?# ?5 S, I5 @6 X u0 n7 A
7 V- W6 x( e4 S- Y
6 Y/ x V3 }; d3 }( C( X/ r
) }* `) M0 T! v' e# L
& }" F$ G2 l: o |