cncml手绘网
标题: Vue.js 表单 [打印本页]
作者: admin 时间: 2018-7-4 11:22
标题: Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
# L4 Z$ h2 j9 o. u5 k- <div id="app">! q1 J1 K7 X" F2 B; S! i5 Z* }- K
- <p>input 元素:</p>2 m: t# R" v2 T2 x) i# f
- <input v-model="message" placeholder="编辑我……">
- B' f; `) X: E/ Z! J - <p>消息是: {{ message }}</p>% C: }8 f/ o2 T
- & z/ n; V. a& p: ~
- <p>textarea 元素:</p>' ]* `. f- R0 f0 i) `2 y
- <p style="white-space: pre">{{ message2 }}</p>2 m( d H( S) P* z6 S
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
( H8 E! u' x2 p# h - </div>9 t$ S* m9 K1 Z: C+ ~* C* w2 |' Z
- * r2 ^2 }0 Y& l* c# T- w- x2 }8 w
- <script>
" `# |, C* j; P& l! H/ W9 G - new Vue({; P& O8 o1 ]2 h& X
- el: '#app',1 p# J8 |5 {4 P' L! T
- data: {1 F) c" ?' c. N' n3 |# K, E
- message: 'Runoob',
) O3 g% T5 R7 t3 f9 L E) ^5 f M - message2: '菜鸟教程\r\nhttp://www.runoob.com'% O$ x2 r. C: M( f/ P: D p
- }
8 v i/ a. j' I1 g% [) N& v - })0 Z' h8 G2 F. G3 R/ `6 h
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框以下实例中演示了复选框的双向数据绑定:
5 {1 B5 k R4 N0 R- <div id="app">- K( P$ A# z! J. B6 z0 V4 Y" h( t
- <p>单个复选框:</p>' e. @8 z( Y) n- P0 P2 y
- <input type="checkbox" id="checkbox" v-model="checked">4 K& z3 Z1 n7 d
- <label for="checkbox">{{ checked }}</label>
" Z" B2 w) Y2 s; m' e - . t2 l. o+ P$ j3 O- I; r
- <p>多个复选框:</p>
0 k* J+ d/ j( }) z# y8 A5 ` - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
: z: @8 T! k* }) Z' K* {) P4 y - <label for="runoob">Runoob</label>
; s' ?! g1 H) H3 C- G - <input type="checkbox" id="google" value="Google" v-model="checkedNames">
5 c# ^* e4 S, c1 b$ L1 R - <label for="google">Google</label>
8 {/ K3 W+ W) C3 A - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">. o, n; N1 z( a: b
- <label for="taobao">taobao</label>
$ d- u# X* b S, W/ ^2 z% r2 f3 Q - <br>
% d8 h6 n: _3 u) z6 n) `( B' Z - <span>选择的值为: {{ checkedNames }}</span>% c/ G8 j9 _/ X" O
- </div>
( L+ V. k4 y; w9 v8 { - . l+ z4 W- a- Z% p4 }: G
- <script>
8 z6 j+ V; Z, O6 ^7 c3 T - new Vue({& i) K3 Z( V' \9 \+ j- U
- el: '#app',1 Z p+ K1 b! V+ B5 F. {8 O
- data: {+ Y4 Q7 w4 F$ @/ ]9 T( P) C
- checked : false,: y; \1 m% _& W, c
- checkedNames: []2 G# c' F. i/ T& S! m6 W0 `
- }
! N% }" w, B, ~/ S/ u - })
9 K* c# t) B+ F7 [' u2 `% Y - </script>
复制代码实例中勾选复选框效果如下所示:
单选按钮以下实例中演示了单选按钮的双向数据绑定:
单选按钮% N; k) V) p- T0 ]% Q& d
- <div id="app">
+ m1 h0 M1 i! U - <input type="radio" id="runoob" value="Runoob" v-model="picked">' R" Y3 M/ |& S) r; }
- <label for="runoob">Runoob</label>
4 F* j) {( P+ {. K! s2 x - <br>& D6 V$ w. A! F& P) J+ g9 R
- <input type="radio" id="google" value="Google" v-model="picked">
) H6 u/ A" f- u6 d3 x. B1 v. r1 E - <label for="google">Google</label>
8 m: i& ?; X2 ~ - <br>7 Q/ D+ O; e2 g# m3 R6 D
- <span>选中值为: {{ picked }}</span>
/ a' q6 E! b6 R- K3 E - </div>, Z# M7 n, s2 k/ c. p
- : _) E0 Z7 w9 ? i+ R* O
- <script>
, X& i5 @2 g$ g - new Vue({3 \- L. M" N, U/ d) X
- el: '#app',
" h p+ a4 }7 G; V" S( r S - data: {
: H5 W, I3 y& I9 m5 ]8 ? - picked : 'Runoob': L H, {1 p' x0 K8 Y
- }
1 t$ \) \0 f' J* J# m0 }- @9 J) ` - })/ y, P! A* S# r$ L) L* M/ q0 c
- </script>
复制代码选中后,效果如下图所示:
select 列表以下实例中演示了下拉列表的双向数据绑定:
select2 j K) ^ b! I
- <div id="app">
0 ]5 a `* Y+ b& V0 _# @ - <select v-model="selected" name="fruit">$ N& ~4 a9 G* L: `
- <option value="">选择一个网站</option>9 r- w, h9 i' r) Z! V9 J2 D8 |
- <option value="www.runoob.com">Runoob</option>6 o7 d7 @- `" Q1 m
- <option value="www.google.com">Google</option>- p' m. Q- t' o/ }9 R! D
- </select>
# [. T2 A& T$ b9 O" F6 P* V$ ^ - 9 K, q$ n+ M0 ]- s, f, x5 R
- <div id="output">0 ~5 S/ W' e4 c, |, I9 k6 W
- 选择的网站是: {{selected}}
& M. e- A7 Y" f: s- b - </div>4 o' f2 p7 |- l' V) ~
- </div>
q, ?) C0 H5 v - & s- _% N/ {" c: }% ~: N
- <script>
2 v. k( w5 W' S, U* q) G - new Vue({
# Z! ?' W- U3 {3 b2 X: v - el: '#app',
" V2 k7 e8 v- |2 B$ E7 K* k2 L - data: {
- }- q: t+ h8 { U - selected: '' . m b( h9 e* \1 U
- }
- ^5 A' G. k. T/ e+ u6 {6 E/ V$ \ - })
- K; R+ J7 {8 Q1 R6 ^ - </script>
复制代码选取 cncml,输出效果如下所示:
修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
- <!-- 在 "change" 而不是 "input" 事件中更新 -->' m+ n- |5 p4 O1 N2 j3 u2 a
- <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({
" }; v' }' `# g - el: '#app',
1 r! ^' v4 x! f/ d7 K& f, g! f0 m9 L+ d - data: {
6 P6 |2 u& f6 C- C( h - checked: false,
, v1 j8 N1 |5 k. _, t - checkedNames: [],
3 j2 J& f/ j3 [1 D6 V - checkedArr: ["Runoob", "Taobao", "Google"]1 @. [- h% a M: ~. H- E6 B
- },
4 [4 u n1 c* N4 l0 f- L; i* l - methods: {
& ]! c( \* J: O F! a9 |2 E1 g - changeAllChecked: function() {9 |2 G5 O& u; ]) X Y s
- if (this.checked) {
6 {2 Q7 c/ T2 ]3 R8 w, P0 K - this.checkedNames = this.checkedArr
8 w/ S( p' B0 M# ]: \ - } else {$ e5 x3 N" q& X) ~/ |6 z
- this.checkedNames = []/ k) B2 S$ N" P2 v% Y2 A
- }
7 O5 m( A7 ?3 ?0 D - }8 l. }: g0 l6 r1 ]
- },# R3 k+ b3 U1 `4 u0 k/ {0 d7 ?
- watch: {5 l9 D, y9 }! T4 d4 x9 z- r* Z
- "checkedNames": function() {; O4 O) {2 j4 X6 ~6 ~( b9 ^- T& O% ?
- if (this.checkedNames.length == this.checkedArr.length) {
3 p$ w4 x( T" I" P! G; j - this.checked = true/ P& w p" A; n
- } else {
" | V( ^3 m9 R* z- v4 G& o - this.checked = false% r) I/ r& z$ Q. t. o+ I6 |
- }
) M$ N, M" r* N. _4 V( b2 V - }
2 u5 A' H% t5 I$ e' j - }
0 c5 X4 B3 }: e. a - })
复制代码
* m; q6 I8 {7 n5 H& e
6 s0 V+ u- @ D% R3 r
! @: k# V. Y% v X( q2 o! ~0 N/ o' x% w c; e% v
+ r) Y5 \+ J1 h* O# K
: U. \! z/ c! }. P, R
8 U C5 N. n7 ^. N6 P/ }9 o1 X/ y
| 欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |