这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
& D+ r/ l' \4 h7 A, X: o, y- <div id="app">" M. B9 p) S* C3 w" J4 q8 t! c
- <p>input 元素:</p>- M* l( a) p* s
- <input v-model="message" placeholder="编辑我……">
/ ?: m! A, s; l W/ U+ P - <p>消息是: {{ message }}</p>6 k+ w+ i3 ]4 R2 z' J
-
5 ~* H% f/ F8 n5 u4 x' U# l - <p>textarea 元素:</p>8 @ n/ C( `2 ]4 f% M& A
- <p style="white-space: pre">{{ message2 }}</p>& {1 O! p1 i# q6 Z$ Q! k
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>, l# g( i( G7 _ [
- </div>/ L1 I5 C& }7 t( B! e) C' a6 b
- ; U5 I& f8 G1 s
- <script>
! D8 J* J+ \4 ?$ t- j& F - new Vue({, d5 l3 \6 `. c5 W
- el: '#app',+ Q$ M7 j: e2 R6 k# \2 ~
- data: {/ A* @* V: H% m2 e6 ^4 z
- message: 'Runoob',
3 r, G3 p( U* ~1 V( M8 H - message2: '菜鸟教程\r\nhttp://www.runoob.com'! K% I, i- y3 T3 b( D3 {- V
- }) Y0 }6 _. w7 c% H& b
- })
7 l& Q# }0 z. z( O% g5 ]3 I5 }' {9 x - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: 7 N0 F* X, r7 u
- <div id="app">
5 Y4 F9 i, n9 d/ z, l* r* r - <p>单个复选框:</p>
; v0 s" ]& \! K0 \2 v+ Y - <input type="checkbox" id="checkbox" v-model="checked">
: L( j- L( `* N - <label for="checkbox">{{ checked }}</label>* [* p6 C/ u* E" [) {- a
- " i) F$ U2 E! x) b# i7 M
- <p>多个复选框:</p>/ m& I: f7 }: ?# I/ L
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
1 b7 b; V5 o3 N' ?3 {5 ?. o; R: S( | - <label for="runoob">Runoob</label>
7 I, d4 s8 I; F5 O - <input type="checkbox" id="google" value="Google" v-model="checkedNames">3 M6 x# n6 w8 a; R9 E
- <label for="google">Google</label>. k0 H6 R$ W: G4 p- O
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
: z( J5 ~2 d5 \" X+ M$ ` - <label for="taobao">taobao</label>4 s0 [9 E* o4 z1 j. J
- <br>
7 h5 e2 d3 m2 c- E: l* d - <span>选择的值为: {{ checkedNames }}</span>
^4 ?, u' @6 q4 ~8 Y4 u# u! R- ? - </div>( l5 q' s+ g2 H+ r( e
-
# C O W( Y' X - <script>
, j: H* O: D: P, C' a3 J3 ]% Z - new Vue({
# v: Y8 O8 D! w - el: '#app',
& P5 x: [0 v# F( W. Q8 u - data: {% i$ T0 `7 s3 h
- checked : false,
( h1 `+ D! l5 R. W - checkedNames: []" e2 d6 k3 `; v
- }
: `( N+ R$ _* p! e. B. [ - })5 R+ ]3 a$ M N' ~- N H
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
! W& ^2 \" Z5 ?" b( t- <div id="app">$ u9 a, Q5 D; A! u% L
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
$ @" L/ ~2 u5 J! Y5 E9 q - <label for="runoob">Runoob</label>
/ Z& R' [0 j$ X+ o: @ - <br>
" L3 h O& t: @& G/ Q7 \1 G - <input type="radio" id="google" value="Google" v-model="picked">3 ?* g6 ^6 _/ c6 n
- <label for="google">Google</label>. ^+ y4 {1 `% _+ P- @6 O
- <br>
9 R/ x7 O1 Q$ c' C - <span>选中值为: {{ picked }}</span>
8 Z0 j+ i6 C8 |8 v: ^$ Y - </div>- }6 v8 b' o! e( A8 Z
-
8 W7 r* m* W4 l. }# M - <script>1 h! x6 r4 @5 J! G) q& R
- new Vue({6 u. k; n' }( E5 M
- el: '#app',
4 E7 M X( o% q- M& Q/ j8 L* R3 N% _ - data: {
5 n# u2 Z8 ?6 x( u% P4 g. e( B - picked : 'Runoob'6 ^' j& { s% {8 P; N C8 Q
- }
# }. o) k+ a4 ?# A5 Z- k; O% |& }/ c - })% l, n6 ^1 Z6 U, E0 e- ^
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select; A; T& d+ G/ |& I: n( f! g. E
- <div id="app">1 @- M9 J0 X" G% }3 Z4 N
- <select v-model="selected" name="fruit">
- v5 g! u/ k$ |% k/ x - <option value="">选择一个网站</option> X% ^ I0 j( `8 J0 J! f
- <option value="www.runoob.com">Runoob</option>" m, t" v3 W6 |. O( {9 q% v
- <option value="www.google.com">Google</option>1 `; x' _ ~- m8 v0 C
- </select>; p; S; b- j3 ^7 g. t3 T R' R
- % ?3 O: g2 w. _( Z6 a2 s
- <div id="output">3 v3 C7 S6 E) O
- 选择的网站是: {{selected}}" \: |7 f/ m8 F+ L" \
- </div>
9 q% G2 l2 V8 D: e- G - </div>- ]( X$ ^. O% J* ]' D
-
+ R" i' y9 ~" c/ c1 E: J8 }4 U - <script>
2 e6 y4 G) d' s8 f3 Y - new Vue({; E( b/ i9 N) X/ e5 z6 n Z$ s. q
- el: '#app',
# I' j7 `6 i; }8 t - data: {% h5 |# R$ Z+ I6 {2 n6 q+ `
- selected: '' ; E) m+ N+ \% Q1 u) D1 h
- }
4 \+ s% m" i8 A- C/ { - })
2 t. H. z7 V. N$ A: \ - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->3 `. t# _" t+ y* }7 Y$ {: 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({
% W; J% S* `' ^ - el: '#app',' I4 E1 y' e9 ~, [: X
- data: {
- D6 x$ e) u5 M+ X5 {% V, ~! G - checked: false, F8 U# v! y# e+ S& ]
- checkedNames: [],% a! {- _; x- h& Y6 x7 D0 m
- checkedArr: ["Runoob", "Taobao", "Google"]1 e6 ^ ~4 q% {) a* a% K% T
- },
- N8 E6 z% r9 o$ c, _ - methods: {
9 \. T" E6 A1 d6 }! ?3 O+ ^2 `/ h; i/ p( z% W - changeAllChecked: function() {% `5 G. w3 x+ h+ f& i" ^
- if (this.checked) {% d9 k5 X' Y- N' |3 K( t8 I
- this.checkedNames = this.checkedArr# H- m8 K$ S8 K7 c6 _2 |, {0 v
- } else {7 ^, c- Z3 j+ U' c" Z2 _& C, P% m C
- this.checkedNames = []
; }' e0 y3 R$ L' g" z( e - }" |% K% Y) {! i+ j) H
- }# h0 G+ m! y$ B7 u3 m Q. ?# d$ [
- },* r, p% B$ {% `4 C2 B9 g
- watch: {; O+ o! C* F: D |8 y/ @
- "checkedNames": function() {
" Y0 ^4 ?2 i" ?% B5 v* k5 y - if (this.checkedNames.length == this.checkedArr.length) {
1 L, q N8 m. B) d1 E - this.checked = true8 c/ \+ }/ @6 S, o6 H) Y& b) ^
- } else {
; _. S: M _) Z2 ?4 P - this.checked = false( K& P# u1 s3 l/ @# h- e* Z
- }8 r3 i. ?8 f* [8 t- R
- }
+ @2 C$ p T0 e. ^% b! d - }
4 ^7 S: i3 I9 Z/ `. d: a* i8 F - })
复制代码
" a/ h$ \ l5 ~6 i5 A; h$ G+ t$ j' M7 L( Q8 S
h f# U6 B5 l! _
2 S8 c9 V( C& Y( d/ D! a
2 _! I) p$ n% c% C" m. o/ n
, [& q, [0 S7 Q
& j. _3 G6 S1 C' M* ?9 X2 l& o# Z5 F+ B* [& v8 p0 f( o% ?
|