这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
7 p$ F- k* j: s6 p5 N4 S4 d- <div id="app">
4 C" v5 a" w( Z2 Z3 e, O# y - <p>input 元素:</p>7 ~) x- Y( I R% X/ L' A9 B, ?- ?
- <input v-model="message" placeholder="编辑我……">0 \4 z( E& u# F3 e
- <p>消息是: {{ message }}</p>3 o! N. g, f8 w& K5 ^" Y# H+ ^6 l
- . j# c9 s S0 p( P' y' i
- <p>textarea 元素:</p>
/ y6 H4 U+ b) \; D5 R1 t$ D - <p style="white-space: pre">{{ message2 }}</p>
7 c6 ~8 S; ?9 z+ |; Y+ }/ m V7 K# q" x - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>+ W" k3 r3 @# l
- </div>
8 o% _, [6 h) D" u- c. T: ]4 z - " u% S" o0 e5 R) d
- <script>4 {9 J1 w0 _+ Y
- new Vue({- |8 F# O* }) V' U; k& j" Q: M7 N
- el: '#app',
8 v" D% p+ e- S3 b- j4 c J - data: {3 `7 G3 w. \0 y$ P$ ^) u) I
- message: 'Runoob',5 q5 g- j t8 K& t3 s, O
- message2: '菜鸟教程\r\nhttp://www.runoob.com'
I' T7 D& j; N: t$ ~ - }
: B0 h! U( D2 r5 i - }) \. w. _1 v1 U( }) O! V. j
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: / V1 L4 @; J9 e
- <div id="app">4 |. n6 x8 v- `! k* D9 c& [
- <p>单个复选框:</p>* n7 G* F6 f# ]
- <input type="checkbox" id="checkbox" v-model="checked">
+ ^0 e! s# E# \; D6 n - <label for="checkbox">{{ checked }}</label>
- Z' O5 ^! Q9 Y -
3 @0 y, r/ L3 D3 x# y+ _+ J - <p>多个复选框:</p>
N( X9 K$ P) m4 R* q: M6 E - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
# P- n; V. d# M6 c) e) s - <label for="runoob">Runoob</label>% ?; x2 r* o* M
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">: P4 F4 _$ U8 h; T: l
- <label for="google">Google</label>1 h/ v* ?, _% n9 j% X& a0 P2 d
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">, m) I' a& ~; c
- <label for="taobao">taobao</label>
7 x3 C1 O& H- W) x$ ~7 ^ - <br>' D# g& {( r( b6 ^) E/ j' X; E f
- <span>选择的值为: {{ checkedNames }}</span>
2 T- ?* x# E3 R0 }5 c1 p- G3 o5 r - </div>: ]5 m% A* ~) o6 z1 w2 k
- ( Q2 ?4 l# K1 m, U5 Y7 i' v
- <script>8 \2 B/ H8 L8 g, v& D( K$ F
- new Vue({
8 g$ S( A$ I. h% Y - el: '#app',. h P2 @: u9 Z$ M# u6 H( f; H
- data: {
. Q/ h; [, i# |$ e - checked : false,
% o" I7 o+ v8 u4 S) c1 C; h# e& ` - checkedNames: []
4 @4 F' n, u" I) b9 F# u - }' O4 z1 t7 N3 W# K, A! d
- })
8 p4 _$ i9 J" ^/ Q) i; X - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
2 w: y/ N. x$ X* A0 G3 u- <div id="app">
' t4 f0 R4 Y! t: \- O* r9 a - <input type="radio" id="runoob" value="Runoob" v-model="picked">7 i, [* E: q/ L6 m5 E0 f& f
- <label for="runoob">Runoob</label>6 e6 i) ?& h' C) M3 o
- <br>
% C0 O$ j+ l. j- ^ - <input type="radio" id="google" value="Google" v-model="picked">6 w) w$ o0 A) m. H/ r$ {
- <label for="google">Google</label>
- D T, j' _* p$ F4 ?7 f - <br>* C2 j, G4 G6 C& M0 H `; h8 q: o
- <span>选中值为: {{ picked }}</span>
+ c7 {3 e, ?1 p1 v+ D6 U - </div>' R! H% o8 K3 W" w
- % z' M% v! Y3 _" o, N, z
- <script>! ]1 W+ \* P; ? C9 x
- new Vue({
+ b0 H8 T. M4 A' H7 z) c - el: '#app',4 j0 f8 }7 j l; a5 e
- data: { t5 _% j1 m: `0 E3 b
- picked : 'Runoob'
3 t* q1 t. A+ z& R - }/ U9 Q! ^" S& q# j1 w( S$ H
- })
4 U! q; l7 J1 ^" ?$ p; s - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select& [9 p% I* f b/ J/ Q$ T
- <div id="app">
. z9 l8 K% n3 l. P - <select v-model="selected" name="fruit">3 s3 h* C; ?* Q1 p6 u* {, x: I
- <option value="">选择一个网站</option>
/ C5 p1 n3 T3 n4 M& f - <option value="www.runoob.com">Runoob</option>
0 O; x- C+ i+ H. L* j) T# y - <option value="www.google.com">Google</option>
' j1 e6 M& f; `( T$ l. g$ Q - </select>
I7 W5 v/ w% P/ y0 O -
' p* p, D9 }- Z - <div id="output">
$ {- L# J$ V5 I$ f+ A - 选择的网站是: {{selected}}+ H% _ o7 k- ]+ U' R
- </div>
; d1 j* R4 n& J/ T0 V/ _* X - </div>
4 f) _/ i" O: t8 L2 t; @1 Q - . c. `. m, j! R
- <script>; A5 o: e1 X* w9 [. G
- new Vue({
, G. x+ ? k$ ?& \7 u3 x - el: '#app',. {( J/ _4 ]/ ]3 E9 f9 d# a4 q
- data: {: h6 E0 B$ M$ A/ g1 \! P8 r
- selected: '' 9 T/ {- o7 k5 Q
- }
2 {+ q$ N9 c$ N6 v" p- c - })
# o# ]1 \' ]: `7 b+ b; P - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 --># U; ^; \# o' W3 g+ @. m
- <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({
+ Q- _- w" ?: A! _4 D - el: '#app',3 k0 I( _1 O$ N! M. u
- data: {
: w8 P* Z0 b q - checked: false,
5 y1 F. q" l; r+ p7 m* n - checkedNames: [],% _. F$ P3 x2 v& w3 a
- checkedArr: ["Runoob", "Taobao", "Google"]% W2 D/ {2 T, J% K) w& N& |
- },, F( U7 {( V. r2 f1 ]
- methods: {# e' e3 f1 k6 b# Z3 W
- changeAllChecked: function() {
: W8 ~ R6 I9 b. s - if (this.checked) {
! B) Y' F; Y3 s. x" \( Y6 y - this.checkedNames = this.checkedArr- n) K/ H1 y7 f8 I* q
- } else {
" `1 B; A) {, g7 Q - this.checkedNames = []. q$ C6 G& z% X+ M+ Q0 A# y; d! _
- }5 d" Q9 I0 |8 @' R/ Z9 r5 C
- }
' K: r" I0 C! e8 L" ]% E! ^5 W - },
4 Y6 Z9 m1 t0 H0 Q- A/ d: L - watch: {
F2 x$ o. ]( g, ~. h) | - "checkedNames": function() {
5 X$ s+ j; B* X) Q0 V - if (this.checkedNames.length == this.checkedArr.length) {
1 J2 t [, Y+ T* G( R# X) _ - this.checked = true) m, t% C5 K4 I1 I
- } else {4 Y) J+ F; B' c
- this.checked = false
5 m$ s* p- u1 r k& J - }
4 L' H" t4 ]9 M/ c6 a - }% u& _* Z; Q8 |5 `
- }
$ B8 d5 Q* H# B+ ~! H - })
复制代码 * h. e9 Y$ S |) ~( S8 J
- S: C5 G, r! L1 j/ N( h
2 h/ w9 w: }% o; x3 t$ Z
' l# v- s) M0 v2 e) H& S; a
; s+ S- ?; d, q+ _/ @6 T% K
4 C6 m; P; s0 Y1 p; q
/ n7 r. \( M5 l) @
7 O; Z1 ]0 e; |$ ~6 E: |. d |