cncml手绘网
标题: Vue.js 表单 [打印本页]
作者: admin 时间: 2018-7-4 11:22
标题: Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
0 R# h, w3 }6 d) k# k+ E- <div id="app">7 A+ l' ^- n( o- U U7 E
- <p>input 元素:</p>
$ V, U3 g# P% R6 |6 Z - <input v-model="message" placeholder="编辑我……">( k9 q0 U$ k7 v& Y$ V
- <p>消息是: {{ message }}</p>" O; J4 H# ~/ Z: F* w
- 7 i, l" J' ?( \# s
- <p>textarea 元素:</p>
* z1 u& b& e/ o - <p style="white-space: pre">{{ message2 }}</p>$ L: G9 n4 k' W. H; u% P
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>6 Q" w+ e7 x6 F- O# l: n
- </div>
2 n/ P; [+ W4 b0 q. c -
# @ G, B$ y, K; [9 r - <script>9 x8 |3 @% }# ]' L1 [9 D
- new Vue({9 {$ ]+ k/ o6 v9 a- k& D
- el: '#app',+ I( A5 Z( B. v; I$ g: I
- data: {
6 b" V5 w! z+ p3 M - message: 'Runoob',1 A/ D: ]$ y' C @8 S# H" k7 H
- message2: '菜鸟教程\r\nhttp://www.runoob.com'/ o# l$ Y' f3 z8 v$ f+ t4 F
- }
% o! w( ?6 u) Z& U8 P - })9 t( K+ T* K- Y. }6 o8 D( C) ?
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框以下实例中演示了复选框的双向数据绑定:
' z1 F) ~: ?6 H6 |% L1 u* O8 c- <div id="app">
6 }( u% Y' |5 N' \ - <p>单个复选框:</p> _! E$ {, h- s
- <input type="checkbox" id="checkbox" v-model="checked">
! V7 `7 E4 R* d2 x: q2 x - <label for="checkbox">{{ checked }}</label>
2 L# Y# y% s# L' @" a -
2 }5 i. E% N8 B9 R* _ - <p>多个复选框:</p>8 Q9 V; O* G& {, X9 ]
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">( {2 E9 C+ P# J; ?+ N1 N2 r
- <label for="runoob">Runoob</label>
$ ^- s& G/ {7 E" G - <input type="checkbox" id="google" value="Google" v-model="checkedNames">: f, a( @/ g# p) z, P
- <label for="google">Google</label>3 r9 g! p0 [! F" }- K5 S
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
7 M8 K% F! S6 ~3 H: g - <label for="taobao">taobao</label>
/ Q6 u9 `, d- r* A. N u - <br>
/ N2 d1 ^0 @9 _) U- U - <span>选择的值为: {{ checkedNames }}</span>, Y" F* i! I2 c# f% i) f8 @9 ^
- </div>6 ^( j& C( h( H6 r! v
-
% y5 T# V2 }# c; K5 L - <script> g8 n6 ^* x8 ]5 X1 Z
- new Vue({
^ \" F. Z2 J5 O- H - el: '#app',% m% G$ `3 }3 n6 a% I( G. d1 N
- data: {6 W8 n: V" }( |1 o3 A
- checked : false,1 a# a# L( e/ p
- checkedNames: []
# R( V. z8 ^3 X- E n& P - }
6 M) X7 z6 A+ R" G - })
- g! \3 i- p. X9 | - </script>
复制代码实例中勾选复选框效果如下所示:
单选按钮以下实例中演示了单选按钮的双向数据绑定:
单选按钮
Z! A' `& `- W- I# G/ a7 q% o- <div id="app"># }: e" \' \0 e8 k
- <input type="radio" id="runoob" value="Runoob" v-model="picked">! J+ g7 @+ A1 a
- <label for="runoob">Runoob</label>
6 N, L1 i: M9 x6 p# W. \6 _7 r/ f - <br>* Y8 m4 J9 d D
- <input type="radio" id="google" value="Google" v-model="picked">
0 `3 ~. S5 F# h) e3 | - <label for="google">Google</label>
" k* G- j0 _1 ` - <br>3 X! ]% g" ^/ M: P3 |; v
- <span>选中值为: {{ picked }}</span>3 i5 Y, [, k6 V/ I% H8 L2 H
- </div>+ F" j+ J+ I$ ~* Y
-
( p, \2 }5 t ?+ V$ r, P+ \% |5 V - <script>
0 F7 Y+ F/ {& J - new Vue({
' X$ J1 [5 w( E! A" r7 B/ z - el: '#app',
/ L. E p3 z+ E2 Y4 j1 X1 ~* B - data: {
' [& R9 K0 L B) p5 d! ^" z - picked : 'Runoob'
4 e k" [1 I, A8 k- m: P) h - }
; w$ a. N( F, h- N/ F - })
: H& D% V7 t8 j - </script>
复制代码选中后,效果如下图所示:
select 列表以下实例中演示了下拉列表的双向数据绑定:
select H2 K a& Q8 m+ |: X6 t: P
- <div id="app">
0 G9 L$ U( \2 V5 X" z5 \9 A - <select v-model="selected" name="fruit">( L7 `* c4 v" X6 L$ z S7 R
- <option value="">选择一个网站</option>
1 }- | H" x# l2 l: v - <option value="www.runoob.com">Runoob</option>
/ m0 ^/ M# @! B* r; G/ D - <option value="www.google.com">Google</option>
; o5 \( v5 ~4 | ] - </select>
, {) g& ^# U8 X: j5 G' L -
+ o, v9 G( v9 X5 T; L - <div id="output">
8 r9 B5 Z. \/ {8 ?; _ - 选择的网站是: {{selected}}
8 Z1 ]) a+ x" M2 A- N - </div> ^. `: F- E4 L
- </div>
# x5 ?( T9 z0 Z -
1 H b9 m1 A( ]0 s, q/ n) x - <script>
$ J* C; w' Q. q& W8 u - new Vue({
8 ?7 k* Y; V R6 _7 ~$ s- L8 A" ? - el: '#app',
3 Y% u7 n; \# S! b" F0 @% A - data: {
! G% d( I5 J3 Y: A6 p - selected: ''
. q- V' m& v M8 S2 _+ h - }# T$ r J8 M* d! `7 t+ s/ ]
- })
* k6 q& T; m: V( P6 a" ` - </script>
复制代码选取 cncml,输出效果如下所示:
修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
- <!-- 在 "change" 而不是 "input" 事件中更新 -->
7 X* }* z9 ^) V ^3 {: n% Z6 t, 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({2 p f. }" |- { u7 h5 t
- el: '#app',8 `8 ^" P% T' y: @6 {" ^. ^6 u
- data: {
. F, w5 \$ e! c# F0 f4 W! O - checked: false,
4 F8 s0 \2 k7 g$ J. O! Y) ] - checkedNames: [],- K& @# R5 O5 e! A
- checkedArr: ["Runoob", "Taobao", "Google"]
8 |- [! l& Y: J8 e+ h6 F% l - },
1 P1 Z M7 n5 y6 @ - methods: {* i9 \: J U* ] A, p
- changeAllChecked: function() {. m2 G/ H+ G: q* Q
- if (this.checked) {
0 c% }) A$ H1 e4 F& O$ ~ - this.checkedNames = this.checkedArr
1 i4 E. d1 [3 b2 i7 @! ?; m - } else {. {+ B" P+ ]' {9 I$ y" J0 _
- this.checkedNames = []
% Q8 {5 R: I7 s: o5 \ - }
. K7 O8 j1 ]. R! L - }
4 Y7 ?/ W' ~ t% }+ B: @% Z - },
& g; W7 p- z7 C9 }& ^0 v' W - watch: {
: D7 n4 i6 O4 n5 _5 w1 T - "checkedNames": function() {
3 l X+ H8 Q4 [ - if (this.checkedNames.length == this.checkedArr.length) {
R9 |$ O' g6 A5 i, i# \3 @7 j - this.checked = true/ i0 h- Z5 j' ^1 y8 v& A6 S
- } else {" a! x0 p7 @# a* n
- this.checked = false7 W4 N! s/ P9 C% R: J0 ~
- }
& {7 h. o5 b9 _! w - }
) L! @2 D4 Q+ @$ Q1 N+ J - }3 k* @) k5 o) [8 }' Z
- })
复制代码 0 Z! b0 \( v1 x4 H
$ w: h5 j1 N; W! _
- J; P2 E0 R5 s
1 g. i; {2 l( a4 X! w. D
% n2 B5 ~' H2 x/ P) q2 r* e) u' D r* n' m
2 P! [+ r) y! P+ z1 W1 l
4 a8 G6 b9 o+ Q9 g# Z5 |: Z. e+ @9 E- ~
欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |