cncml手绘网
标题: Vue.js 表单 [打印本页]
作者: admin 时间: 2018-7-4 11:22
标题: Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
' U8 L) E3 y6 a1 J
- <div id="app">
1 E- X" |6 j4 M! g+ T( j2 y2 U - <p>input 元素:</p>
6 ?6 B7 c2 X) h - <input v-model="message" placeholder="编辑我……">
+ I) H( V1 |- \9 d - <p>消息是: {{ message }}</p>* F, D) J/ Z1 m2 B: I# M* ^4 s
-
5 |' R. {3 d3 O0 a. \0 s0 | - <p>textarea 元素:</p>' G: L$ w p5 d& E$ }: V
- <p style="white-space: pre">{{ message2 }}</p>
# [2 |3 Z* m& v. F: W9 h% T - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
. o0 `9 F; u8 | - </div>
2 e# E5 S- _! I4 I - * Z& m, R- J) _" n& Z1 j
- <script>
. [* {1 ~- r& t% U! c0 ~* a! J, T) z7 [ - new Vue({3 r7 b& C$ e, V# |$ o( }6 W
- el: '#app',
" T+ _+ }* @) r k& g5 S- \ - data: { I, e& Z. J1 f
- message: 'Runoob',
; X$ R7 o9 G5 E" { m - message2: '菜鸟教程\r\nhttp://www.runoob.com'
1 b" t6 b" q2 V$ J4 T) q: E/ z8 ] - }8 W) W# P' N' h1 D; h- |
- })
% ]: J5 i# p. [. g; { - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框以下实例中演示了复选框的双向数据绑定:
" V* Q& a* G2 a- <div id="app">
0 P& P( L' x4 Y: F) z - <p>单个复选框:</p>% h: A' P# U2 [, m9 R7 \
- <input type="checkbox" id="checkbox" v-model="checked">% [% P: n, I$ v5 P; w/ P6 C% d
- <label for="checkbox">{{ checked }}</label>
4 h* s# z: a) f, n - * g0 P9 W8 g& V1 \8 G
- <p>多个复选框:</p>0 z6 K% O- [7 ?8 S( c4 G
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
' y5 l' v) z0 T; N7 v! v - <label for="runoob">Runoob</label>. d M4 j# j$ u8 V; W0 C
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">( z1 _+ x- M3 G \$ K0 K o% R
- <label for="google">Google</label>
, @( J0 s: d3 M+ w& _4 b - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">) v5 {; `; q6 D5 a
- <label for="taobao">taobao</label>
2 G+ e! c) S p - <br>/ Y( _! O; [9 N7 w' Q! ]
- <span>选择的值为: {{ checkedNames }}</span>: i3 S5 ^ ?# I3 o' I* X: x
- </div> m, g% ^- ?3 y, @! p
- : c0 R o3 G1 T; o* g
- <script>
9 n0 s# [# \0 e - new Vue({
_3 T5 v( j/ Q- l9 a; A3 U4 s - el: '#app',
+ ^) L& d, [+ c$ m5 R3 \6 t! w4 Y - data: {! l% d" `: p0 @8 B
- checked : false,
1 v4 T' J0 ?+ C. u* \$ V - checkedNames: [], r, T: k6 z) V- x! l8 J
- }6 O$ `# Y7 Y5 F! T/ x/ [6 |
- })
6 ^4 ]; y6 Y1 D - </script>
复制代码实例中勾选复选框效果如下所示:
单选按钮以下实例中演示了单选按钮的双向数据绑定:
单选按钮
/ \& Z! l6 B3 g! z- <div id="app"># x# Q8 g" _ z9 s3 U4 {$ b- h
- <input type="radio" id="runoob" value="Runoob" v-model="picked">9 E6 H# k3 w. k w& f' t# d) l
- <label for="runoob">Runoob</label># \2 Q5 v, t( d0 t9 ]0 e% Y
- <br>) b a( K7 ^( r, g6 S) D
- <input type="radio" id="google" value="Google" v-model="picked">, _" S5 _( f0 V% Q& E5 t
- <label for="google">Google</label>& A7 z" o( D4 g5 v7 {
- <br>
; g2 c5 C3 V0 S, G* Y4 m$ s" i - <span>选中值为: {{ picked }}</span>
. ~# V, C1 B4 P2 }( }; k - </div>
7 j% B4 V) T( s+ j7 @$ S -
3 \( }: @7 K! M - <script>! t; @6 ^4 u" s7 ]
- new Vue({6 H1 t" D' e0 e7 m u" Z
- el: '#app',
) w+ O; ~* w) T# x( i& @ - data: {
' u9 w1 R9 v$ K, a - picked : 'Runoob'
- g9 `; q" E/ D& w0 x( ]8 ]+ a2 L - }# _ o+ l9 X. `3 H0 j
- })
, z1 |2 W& f6 ~! d+ d& |* Y - </script>
复制代码选中后,效果如下图所示:
select 列表以下实例中演示了下拉列表的双向数据绑定:
select! R" ?! |# n7 V q
- <div id="app">
9 S7 S+ F2 j4 z* U - <select v-model="selected" name="fruit">
# f2 k8 P- J4 z* L/ H, t - <option value="">选择一个网站</option>% I5 L: t3 m4 n5 ? ~
- <option value="www.runoob.com">Runoob</option>
8 s. \5 B% e& ? - <option value="www.google.com">Google</option>
1 n2 D& u P% E( G3 J - </select>
7 U3 h$ r5 D" |. q( U8 i+ W4 G A -
1 O: k2 G/ Q* P - <div id="output">* p& K; v* E- f5 D) D. c; r2 a
- 选择的网站是: {{selected}}
# f* ]6 n: d+ K9 Y2 s6 J3 f! \ - </div>. |8 X4 u6 v& d. u j# i3 ~# N
- </div>; E: G- A) M# x4 L4 t: f5 b
-
4 Z, |6 u7 M* o- j8 f$ u - <script>% o1 W, R( v5 q
- new Vue({1 ?7 J* z. M* ?
- el: '#app',2 H$ G1 Y7 z% d) ~; a$ |
- data: {
* F1 d/ ]% r6 H0 u/ Q% r% L1 p - selected: '' / b2 Q8 x0 j3 [
- }0 `+ q' w$ S+ ?/ e+ S3 }0 [7 F
- })" l! ?" s2 Q$ x9 |4 l, N
- </script>
复制代码选取 cncml,输出效果如下所示:
修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
- <!-- 在 "change" 而不是 "input" 事件中更新 -->; F0 O( R* w2 j6 }! S
- <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({- o- R& h3 a+ ^' g
- el: '#app',. R* X: l2 n% V# R. o3 O
- data: {& o! k" g4 `. j4 I0 I
- checked: false,
9 ^0 w0 q4 d7 i& l - checkedNames: [],! `, V5 n q' z: _. y
- checkedArr: ["Runoob", "Taobao", "Google"]3 _) v3 U1 f S% B' {" B' P' z( {3 i; [
- },
9 ?: a# S' d% d; d+ k3 O - methods: {
5 v$ W" _7 ~3 Z' k - changeAllChecked: function() {' F5 `& B. v, u3 o
- if (this.checked) {* ]- F; K5 x: q) \
- this.checkedNames = this.checkedArr- V5 h( B/ Z3 _- h7 X' ~" E& w4 T
- } else {, j& |6 g; `% Z2 i$ w5 ]
- this.checkedNames = []
1 R8 V; c: C# W* }1 X - }5 C. y- m3 H$ b* e* \; a& ^
- }7 i& A- W2 Z. U% t
- },
" c5 U) G3 I" ~3 Y" f - watch: {
$ h% F9 i: d: U6 _; x - "checkedNames": function() {! p- h/ g$ H) z
- if (this.checkedNames.length == this.checkedArr.length) {
# I% K% O& x3 ~8 V( j( u - this.checked = true6 C! b( ]% z/ V8 r3 U% t
- } else {
( ~( r/ }. k2 y6 w - this.checked = false
, ]6 B2 t/ k* F* Z) [ - }
! R( N9 B( r |2 s - }
/ m( H% F6 t9 A, R/ a! B6 j - }
4 @7 @* n( e. ]+ m( n9 W6 N+ N$ _ - })
复制代码 ) I8 O) \9 ? }( X( }
/ Q- m& Q; i$ r: D" M: ]" S- }( D" W6 ^* D0 c6 T
) y, {7 e8 j: i- e O) w
1 [& c) L% m! i& Y" ?
) k% M& S9 J" ]& r3 a6 F0 y- d" s; u) U# g2 D; w& o1 R
+ n e0 x- v ?. H3 I
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |