设为首页收藏本站| vip购买 |

cncml手绘网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 793|回复: 0

[Vue.js] Vue.js 表单

[复制链接]
发表于 2018-7-4 11:22:23 | 显示全部楼层 |阅读模式
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
20151109171527_549.png
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
0 T' }! S8 f7 {' h  G2 W0 m
  1. <div id="app">
    6 \" S+ m& Y5 p4 P
  2.   <p>input 元素:</p>
    0 B3 a( O: N5 E: b
  3.   <input v-model="message" placeholder="编辑我……">) A& z! p/ N9 v3 J  R9 p4 u
  4.   <p>消息是: {{ message }}</p>
    , b, r" B9 t* C
  5.    
    ! M7 d6 k# X3 l: i0 u8 l
  6.   <p>textarea 元素:</p>
    + V1 f; p( r* P% L# b1 Z, }
  7.   <p style="white-space: pre">{{ message2 }}</p>
    $ d$ q; ]( e/ b5 c% \) F
  8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    * a8 c# o4 r4 g  M
  9. </div>" |# \; i6 s2 e5 @  c# I
  10. ! o& s8 G) d% p4 r
  11. <script>
    - l6 A1 Z+ o& c4 J
  12. new Vue({! x5 N0 v3 N3 X) ]5 v9 {
  13.   el: '#app',6 M1 a8 W  B1 Y0 b! V5 }& \) ?
  14.   data: {
    2 V, S+ y, Q8 u7 l' n( U
  15.     message: 'Runoob',
    $ p$ k) s8 {+ U5 d% m4 ?" K
  16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    . C: b+ C3 e; u9 R2 B9 ]: P
  17.   }
    : P# j" f; \' n+ p7 Y, M7 ~
  18. })0 ?1 s6 y1 V; q3 {( m
  19. </script>
复制代码
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框
以下实例中演示了复选框的双向数据绑定:

4 o5 B  `1 U# _3 r4 U  X
  1. <div id="app">5 f6 {1 d8 y4 h5 S' x- W$ g) p9 z
  2.   <p>单个复选框:</p>( n& [9 r" g6 D8 c4 O+ D
  3.   <input type="checkbox" id="checkbox" v-model="checked">1 C) x$ c/ L7 m8 C& |1 V
  4.   <label for="checkbox">{{ checked }}</label>
    5 ]' A& ], B) n& [
  5.     7 c7 H0 R1 O9 h+ v2 F3 h
  6.   <p>多个复选框:</p>+ X0 {' x1 o! J- R! o
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    ( }; Q) @# M- u
  8.   <label for="runoob">Runoob</label>
    5 x" B. r- G' h3 x; ^+ K8 f
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    % A) o" Z. p7 |2 t
  10.   <label for="google">Google</label>3 U6 E3 g& e; Q8 _$ j8 k% ]
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    $ L( \# L* f" ^2 K
  12.   <label for="taobao">taobao</label>
    9 ]2 p! h% l7 F2 M& t  K
  13.   <br># x# n8 k+ a$ W
  14.   <span>选择的值为: {{ checkedNames }}</span>
    : `4 j0 p; M; u; v7 y" Y6 p
  15. </div>
    % f& |5 ~- n( }& c0 q2 A% l
  16. : ^/ N# u* f4 o* ]
  17. <script>
    + \0 Q% [& G* y# n, I% L6 c
  18. new Vue({' Q) ]9 w3 @) J6 [/ n* b
  19.   el: '#app',) V7 z+ s' a" ~; I% i& h
  20.   data: {; U. r# v8 k: b: j' X. b
  21.     checked : false,
    $ X6 K$ B; y) ?  p. v
  22.     checkedNames: []) @+ A# U, b7 F( ?
  23.   }
    / N9 l# M7 k, L/ U) Y
  24. })
    % B* M" S7 D. {' L) o6 y' X$ s
  25. </script>
复制代码
实例中勾选复选框效果如下所示:
F6855065-AA5E-4BD7-B1F6-2350D4B4B1BB.jpg
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
单选按钮4 @/ m+ d2 R1 W0 G% Q1 p+ W7 I4 N
  1. <div id="app">
    9 Z3 I& W  w. F
  2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
    . V2 z6 ~( P8 a7 v/ g: P+ }
  3.   <label for="runoob">Runoob</label>
    ( P6 d+ {8 ^. g& |7 y3 C% i- L
  4.   <br>* [4 {! K0 ^. Q/ H- L2 }
  5.   <input type="radio" id="google" value="Google" v-model="picked">3 U4 _! p% _+ c. ?2 L
  6.   <label for="google">Google</label>7 P% B; g; }" H
  7.   <br>* m& C/ k- d5 S
  8.   <span>选中值为: {{ picked }}</span>! [; v1 R' v/ Z- r# C) W
  9. </div>
    & E3 r0 o3 @% g! L) [

  10. ! t% Z' T& \; t! L; ^
  11. <script>0 E/ e# w) f3 m; a3 S# m& O( x
  12. new Vue({
      K3 W! ^5 G( K- o6 h# t
  13.   el: '#app',
    ) I) N8 Z/ r& h" W/ r. C) `3 E
  14.   data: {
      T4 T4 G/ f2 G# u# ?, W
  15.     picked : 'Runoob'
    5 K5 P  @  H+ u# |# v( T
  16.   }" P0 X6 P1 V3 v! q/ J2 @6 `
  17. })% g) n1 \8 \# S( B* W1 k) c3 N
  18. </script>
复制代码
选中后,效果如下图所示:
F60DA836-0E62-4C78-AEE0-2CFD6A2AE498.jpg
select 列表
以下实例中演示了下拉列表的双向数据绑定:
select
1 e$ T' w9 E" d4 d& L
  1. <div id="app">3 K# K7 M6 V9 N, C
  2.   <select v-model="selected" name="fruit">* E: T( x1 B2 v
  3.     <option value="">选择一个网站</option>4 [, [6 a! Z3 l+ C, Y# @
  4.     <option value="www.runoob.com">Runoob</option>
    % w' B4 l; ~/ o; X" ?7 c2 j) e
  5.     <option value="www.google.com">Google</option>
    & X" u* U+ c& ~
  6.   </select>
    " b8 K7 i/ F  C

  7. 2 N8 o! t3 E0 X6 m: b
  8.   <div id="output">$ T6 S5 d8 m" ^+ y: R
  9.       选择的网站是: {{selected}}
    7 r  ]  k9 y6 O" d1 S' R
  10.   </div>- D, `( C5 W# v3 v; d. Q
  11. </div>/ S3 m, l; ~& Z$ H6 K
  12. - S2 B0 Z4 b6 V! a/ y
  13. <script>5 s6 N7 i4 U  |9 |: v- [# }
  14. new Vue({
    5 i; I" u+ h: N' m; {
  15.   el: '#app',
    " h$ Q6 o7 D; j2 ^; x
  16.   data: {3 n" e- |* h5 _* t9 T+ H' u. v# ]( b" V
  17.     selected: ''
    : P0 [" T' ~6 i3 s$ F
  18.   }
    0 ]. V7 {; e. _: S1 S" c8 t  L
  19. })
    & X% `" v1 h; s  |; V) h3 b4 ?
  20. </script>
复制代码
选取 cncml,输出效果如下所示:
QQ截图20180704112126.jpg
修饰符.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
    9 [& @* n+ `5 _! ^" D
  2. <input v-model.lazy="msg" >
复制代码
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
  1. <input v-model.number="age" type="number">
复制代码
这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
  1. <input v-model.trim="msg">
复制代码
全选与取消全选
  1. new Vue({
    9 }$ y( C- \* x( H
  2.     el: '#app',
    6 _1 C% n' e7 i( q: p( |: K2 m
  3.     data: {
    & `) Q0 ?# c3 t  Y. V9 O$ E1 |
  4.         checked: false,
    / u8 E7 a- j3 K$ p; r: [
  5.         checkedNames: [],
    ; @; [% b1 n; o+ s- l- @
  6.         checkedArr: ["Runoob", "Taobao", "Google"]
    ( j( i' w; V) m" T8 k( i- I
  7.     },9 t* {" Z  ?4 L
  8.     methods: {( Y1 U* r5 y" ^
  9.         changeAllChecked: function() {4 m  M; p& [! f1 ^; z0 J
  10.             if (this.checked) {  Z0 `! L. v/ C9 S# v7 P1 D
  11.                 this.checkedNames = this.checkedArr7 u' k6 e8 Z6 P
  12.             } else {
    * c8 U  a* A0 @
  13.                 this.checkedNames = []8 O1 A- g+ m8 s8 G2 b7 e2 D
  14.             }; h- L1 A) ]2 N* y  T; T
  15.         }: U! `( |. A; B, l0 A$ u
  16.     },
    2 u# l6 R' z4 p+ Z0 q% u' t; E& v* S
  17.     watch: {
    : y! z- t* o! t# |, }: H
  18.         "checkedNames": function() {# ]: c% V" q$ a& W& a) e1 i, M) R6 E
  19.             if (this.checkedNames.length == this.checkedArr.length) {
    $ L: c! W) D+ J
  20.                 this.checked = true
    - m/ Z! x, }. K) A
  21.             } else {
    6 d& q3 e6 Z8 @
  22.                 this.checked = false+ ]4 [: B; i% V4 n
  23.             }3 ?) |" k/ v% J( i4 b
  24.         }) I& L: o2 T' T3 |! W+ n! [
  25.     }
    0 h! b1 M+ D: U, B) X3 ?
  26. })
复制代码
$ r8 b% {4 x# Z" T$ g

# K' S  c/ b5 d+ G5 C- Y: g6 ~( F" W. A$ R7 P& Z
6 e, n$ _5 V$ R" d: M) a/ s  p

! F* P$ y/ V9 i" X1 C3 @
, @+ a/ o. z) O" a# |2 B: }" g2 R9 V8 ]+ l
1 ~% _& |& C" Z: @+ ]9 q# p1 Y5 ]
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则