这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: 5 C9 n _. z* a, s
- <div id="app">
. k0 Z4 N" o- |; c# |: j - <p>input 元素:</p>2 R$ _& y/ P& K& o G
- <input v-model="message" placeholder="编辑我……">
! j! u( f- ?6 K: J$ |! S! p! d - <p>消息是: {{ message }}</p>. b* p# C b" ]( e' D0 P/ J
- % e+ r, K% |$ c
- <p>textarea 元素:</p>3 ^) S# F5 m& h- Z# h0 N' u
- <p style="white-space: pre">{{ message2 }}</p>& }3 s$ S- ^/ f k' N6 O
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
( y: x5 h9 W" Y+ v/ w6 q! F5 M - </div>
! H7 v; V, k" ^! i* k. @ -
* w* n: R4 k, w0 `% \4 N - <script>
/ D6 n+ T2 n' l2 T3 `) [) D - new Vue({
) h6 G8 P o1 E8 q1 U - el: '#app',
2 d* k. M$ S6 b, N6 m, j! S2 L* k - data: {
/ j H. i. A$ l! D j; J$ v9 P - message: 'Runoob',
7 D2 Y M8 [2 T+ u! a6 @; Z - message2: '菜鸟教程\r\nhttp://www.runoob.com'! {2 O$ i5 d7 n& D ^
- }
7 l* ]" q2 \% c ] - })
4 X/ F q: @4 K, O2 w8 O4 h$ o) p - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
0 g7 a% Z0 `$ V9 `( E) a- <div id="app">
/ k$ |& H. S4 E, U - <p>单个复选框:</p>
6 x6 I2 d0 \* y7 w* a& T0 Y2 l# s - <input type="checkbox" id="checkbox" v-model="checked">$ K) W( F1 d8 R$ Y( l( d
- <label for="checkbox">{{ checked }}</label>
5 k0 ~# P8 z; ~7 ]( l& m! S$ v1 ? - % }& Q: d7 Y) V5 B( V$ C
- <p>多个复选框:</p>
) k: J6 G" |# E' }4 h5 [ - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">! F" |% h/ M" ?' e
- <label for="runoob">Runoob</label>6 h. _% i8 f1 z$ K U1 z6 S8 R q. M
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">( `- z4 l( j8 s7 e1 {
- <label for="google">Google</label>+ R" _+ m4 j! a8 s
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">' E6 G5 R& S- b+ O
- <label for="taobao">taobao</label>2 i, [* a# o. f) E; ^: x4 d
- <br>% I6 U+ x% W3 t$ x) d) y% M
- <span>选择的值为: {{ checkedNames }}</span>
1 J7 w. \" C" s( t - </div>
, Y8 O% U7 K* a$ k& q -
) l4 C1 S5 S4 E7 H& Q - <script>% M* V; {4 s; h+ F. x) P
- new Vue({; P; s8 y' _3 v7 G
- el: '#app',
$ _- E: s% B G/ b$ q) Y" H - data: {9 S9 m. | u/ S- n+ Y4 u
- checked : false,
( m) Y4 Z2 U T+ o2 T - checkedNames: []
, s' f7 {+ J3 C+ w - }
# ~) v0 y" }# o' e; R2 p& v2 U - })
3 I$ M/ s1 M$ j8 z# I - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
3 y9 W0 h0 `" `' w- <div id="app">
, [, D- ?% F5 m" M, A - <input type="radio" id="runoob" value="Runoob" v-model="picked">
8 B" }8 `; t0 y' W& e X - <label for="runoob">Runoob</label>
' M$ b6 T* V" B: U& \" ^0 { - <br>
$ ]. k! B9 s6 a8 a; S - <input type="radio" id="google" value="Google" v-model="picked">" ?, D: M7 `9 j, E' Z: h( P, G
- <label for="google">Google</label>
1 |# r+ v# I; u- h9 \7 ^; E$ R - <br>
/ H% L3 K, Z8 \/ ^ - <span>选中值为: {{ picked }}</span>
. v1 K5 D! `+ ^) k - </div>) Y" a* u' A2 @, Q/ g, S
- : T: L9 n# S, m, o9 Q
- <script>
4 t- w+ M( A2 O, Y - new Vue({0 |7 e% R7 w" M! t& d# F7 ?
- el: '#app',% D, g' I& r7 q* @
- data: {
5 N9 j. y2 I8 h' N2 W - picked : 'Runoob'- Y! {( [6 V( c. J
- }- j+ N4 f! y5 B/ h
- })* o7 l. ~! \( R7 f1 M3 }7 |
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select$ b; G& C6 Y c8 d! a1 `% h# K, B2 U
- <div id="app">
- [5 ?# k) O3 K6 Y - <select v-model="selected" name="fruit">( s, L' b O) K! a5 H2 K9 M
- <option value="">选择一个网站</option>
8 j6 w! n8 {, x; L( K4 u; U2 _ - <option value="www.runoob.com">Runoob</option>
1 K% h% k/ J/ e: D0 t* q4 J ]# O# @- R - <option value="www.google.com">Google</option> w$ M$ _/ u" G! T: d. l
- </select>
[4 A9 u+ `7 @( N - * |4 T; k3 w* k# U3 j2 `$ _
- <div id="output">& I$ j* j+ w ?3 l) F, g S
- 选择的网站是: {{selected}}
" e+ l4 y( D' W4 Q: I - </div>
' B- c( \ W$ e7 D' }9 d/ L - </div>* d+ ~) E* I, g: o+ Z& Z1 d
-
( I' q9 C% O5 q' D1 h0 f3 M: ~ - <script>+ ?) E, ^- M# y
- new Vue({
: k% ?3 ?4 N+ c& X/ C# l( ~ - el: '#app',
4 ^9 R+ f- g" r0 f - data: {
$ j! v2 v. B( B7 s7 T - selected: ''
, W4 d# | b* S/ r& S& ? K( y - }
! _1 V/ I! i8 K+ @ - })
2 H; Y& q" c8 h; p( ] - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
4 C1 u; r, f' l- T4 z5 _4 n, X - <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({
5 o# V1 _% a7 J7 g; u6 h - el: '#app',
, R. k3 k1 W0 t% V& f - data: {
' s6 f4 H# n; v/ p; C; W# N - checked: false,, j2 c5 v" P# ^8 o9 U- o
- checkedNames: [],4 t2 `3 @8 A( }/ P& A0 {* p& I
- checkedArr: ["Runoob", "Taobao", "Google"]! G& \+ G: b* F1 G2 r' ?: J M0 e
- },/ b5 y+ w: A# @* ]- b. B
- methods: {* M: x) p% @6 T n( m8 E2 ^3 O
- changeAllChecked: function() {
2 M r! M* l9 D( `7 i3 y$ Z# u6 M - if (this.checked) {
; y% Q. u+ v3 I3 h( g; f6 w w1 Y - this.checkedNames = this.checkedArr, t/ u1 ?! h" Y, i; t$ D
- } else {
9 e/ U. J( ?/ h' ], X - this.checkedNames = []
. i1 _6 V. N! X - }$ ]- R) _# p. r2 X* X% G9 L# P
- }9 r& q+ t" X* \! h8 X6 s/ u! g
- },% E% c' ^8 \1 ]0 |
- watch: {# P5 p* R8 P1 N
- "checkedNames": function() {' m, Q& ?6 @5 P, H/ ?, y* M2 Y
- if (this.checkedNames.length == this.checkedArr.length) {! \6 g* u% u$ N. {
- this.checked = true
) |9 X2 a: W+ K. R3 _7 c - } else {1 @4 x3 D d* `' K3 _6 r
- this.checked = false7 F) z" D% M2 D( N
- }4 J9 q9 l4 }4 J4 t* C! K' d
- }' g( ? {- O9 L& m9 s( \! ^
- }
& V8 {7 Q- |7 C% p. Q; c - })
复制代码 ) | h2 W, g T
; A% D* K" i2 e& X) s
% N$ Z4 b* ]2 _8 d
9 s( l/ `- k8 E( n3 x. k8 Q
; }/ p$ y6 a# k" G* O9 a. n, l# x4 O0 H9 }# x
/ c7 w h& O1 ~0 O/ J
9 l3 A: N# |$ [9 D8 e2 h: ~% ^0 T |