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

cncml手绘网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 134|回复: 0

[Vue.js] Vue.js 表单

[复制链接]
发表于 2018-7-4 11:22:23 | 显示全部楼层 |阅读模式
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
20151109171527_549.png
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:

/ K3 d  U, `' E; _' t2 L
  1. <div id="app">* e+ a2 [( k/ v' ?5 G- \+ a4 h
  2.   <p>input 元素:</p>
    " W- y- T. `$ ]* e# G' l# @. w
  3.   <input v-model="message" placeholder="编辑我……">
    % f2 G! ~; E  D2 m8 Q! c
  4.   <p>消息是: {{ message }}</p>
    9 x3 {0 m5 ^0 v: _$ L
  5.    
      ~) {! l! ]9 f# x$ Y( Y8 S  m
  6.   <p>textarea 元素:</p>" q( U/ z; i! D4 [& H
  7.   <p style="white-space: pre">{{ message2 }}</p>
    & `2 j& W6 C+ {
  8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>; O- C& _4 _0 T3 u3 |' _1 i
  9. </div>% o& J& A8 D! |- h. a9 x. ^3 C
  10. 8 Y  R4 S  ^, q
  11. <script>
    # J9 u% w' L: I0 `$ Z0 l+ g( D
  12. new Vue({7 h1 P" `1 B! b2 S1 t, V
  13.   el: '#app',
    - f* r2 \8 E1 {9 F! n
  14.   data: {
    : R* U/ V4 e) Y4 E. r5 K& I+ D( o
  15.     message: 'Runoob',9 u0 T8 Z7 \/ h8 T3 w
  16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'! G) J' v, \) F! D1 P
  17.   }  H. x& }6 J5 ^5 z/ o4 l
  18. })
    $ U1 o! |& Y- y: z1 G) x$ B
  19. </script>
复制代码
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框
以下实例中演示了复选框的双向数据绑定:
9 ~7 j& I& m) }! U# ^
  1. <div id="app">0 I8 D% K; L' h* |' W) P! o
  2.   <p>单个复选框:</p>. `1 A- N+ u6 w; d
  3.   <input type="checkbox" id="checkbox" v-model="checked">
    8 B7 Y, h. l+ u/ Q4 f
  4.   <label for="checkbox">{{ checked }}</label>! x0 T9 M& O. c& v$ e* g
  5.    
    4 q+ l4 ~+ Q( {
  6.   <p>多个复选框:</p>( r1 G0 V& u7 N6 j4 Q
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">! d: k$ A5 I3 w* |" ^
  8.   <label for="runoob">Runoob</label>
    $ X4 [( y" e$ M$ I
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
      G+ R& k3 ?( E: p  O# }1 k: c1 G
  10.   <label for="google">Google</label>
    4 Q2 f+ M  k! `1 p* k
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">7 D0 [; f2 l9 b% p9 W+ I
  12.   <label for="taobao">taobao</label>7 h6 s5 X* d8 n; w
  13.   <br>( V  y4 A( r1 W9 u+ q" j
  14.   <span>选择的值为: {{ checkedNames }}</span>/ S8 l* i# t0 N4 e, Y/ Y; o0 \
  15. </div>& Q3 Q& H! ]4 c, l. _
  16. 9 z7 r- O2 p2 |4 a3 B0 t
  17. <script>, _) z3 Q6 q+ u6 r
  18. new Vue({
    7 W1 \3 ]6 ~' @0 g" T# a
  19.   el: '#app',% `/ V( d- H- n3 Q) W
  20.   data: {
    ) f& l' s6 {7 r
  21.     checked : false,
    . G' C; M& v) q3 _7 i( S
  22.     checkedNames: []+ s! O0 O# i5 k4 b. `3 u
  23.   }
    5 s  p! H  u1 P7 A
  24. })
    3 {( G& }% h) S: x( d
  25. </script>
复制代码
实例中勾选复选框效果如下所示:
F6855065-AA5E-4BD7-B1F6-2350D4B4B1BB.jpg
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
单选按钮
$ T9 q% I$ d1 n3 w
  1. <div id="app">
    : b8 C/ n; H2 h4 J! g4 i
  2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
    # I, G# Q& \/ A9 Z
  3.   <label for="runoob">Runoob</label>
    . r2 G  o* t( u9 M# O2 j2 F5 f
  4.   <br>
    - g6 G1 i8 R- F* c, d
  5.   <input type="radio" id="google" value="Google" v-model="picked">
    2 R1 {* c6 i1 o' T, V. l7 U6 v
  6.   <label for="google">Google</label>4 I4 e% }  ?' m
  7.   <br>
    : h: h( @4 H- S- A( [2 Y& A: G
  8.   <span>选中值为: {{ picked }}</span>% M" B* Y% z( w) f6 Z( f: j- \1 [
  9. </div>9 V2 @7 j0 M- D, W2 P) n
  10.   V: w6 k. Q3 e. \4 a
  11. <script>
    6 a( H7 M/ V8 r2 C) l
  12. new Vue({3 G# Q/ w: \: u1 ]( K
  13.   el: '#app',9 U/ U: z  u7 M4 F5 m
  14.   data: {7 K- a+ c, O' o) U+ ?' K; O; d6 {
  15.     picked : 'Runoob'. [, ~* l7 ^2 y) f4 L: H. R% B3 O/ a& Y
  16.   }
    * Y7 q4 Y- j; D3 [3 W
  17. })3 i5 C% t' ^& E
  18. </script>
复制代码
选中后,效果如下图所示:
F60DA836-0E62-4C78-AEE0-2CFD6A2AE498.jpg
select 列表
以下实例中演示了下拉列表的双向数据绑定:
select
6 t- }9 Y1 u2 Z5 A, O; `
  1. <div id="app">
    8 s- K9 L7 h  ~! z4 M+ W
  2.   <select v-model="selected" name="fruit">; N- T: M+ u  h/ a7 E
  3.     <option value="">选择一个网站</option># q4 F) W0 M5 q5 N- r( Z# }9 z0 S
  4.     <option value="www.runoob.com">Runoob</option>
    ) m4 v0 I: D/ r6 l9 K% i- w
  5.     <option value="www.google.com">Google</option>
    % N; j* I; P) o2 m
  6.   </select>
    4 L. v! g7 w) T* _5 V: D' P
  7. ) ?; y! w# z* b  V+ m/ Q
  8.   <div id="output">
    ) R0 z0 X3 s3 y( u; d8 T2 O
  9.       选择的网站是: {{selected}}
    5 E( J" |" U4 S3 W( Q6 q
  10.   </div>2 g  G5 X1 O* m0 g3 @
  11. </div>( C8 s* a! T* k1 y
  12. $ M! U7 I3 ~2 s  S! U
  13. <script>7 P+ }/ c: t% i# b& F& E  S
  14. new Vue({; G2 E+ T3 _0 C; Y! `+ f
  15.   el: '#app',- l  C) C# W& T2 h* T* t  p+ H
  16.   data: {
      \& O% {7 j. L; L0 R6 v( F8 @& G
  17.     selected: '' - i% T; P( j0 `
  18.   }8 M$ ~  n" k' G. v- [9 S) S$ C" z
  19. }). @* v) t9 j7 G5 ^0 D% p
  20. </script>
复制代码
选取 cncml,输出效果如下所示:
QQ截图20180704112126.jpg
修饰符.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
    ) C. d1 F( L( B+ A" M
  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({* G* N: L' Q* b( U: W* h
  2.     el: '#app',$ M9 n5 {" @! \9 |
  3.     data: {
      ]! w$ D6 n7 o9 D
  4.         checked: false,0 p* ^2 ?4 l$ r6 Q& q& m
  5.         checkedNames: [],) t& Q  J, K. Y9 h) t1 E5 c% r
  6.         checkedArr: ["Runoob", "Taobao", "Google"]5 j$ }' z( e$ T; p! c5 O
  7.     },, p9 l7 j) Q" Q# j  r* i
  8.     methods: {. H( g. H  |4 M* S
  9.         changeAllChecked: function() {5 K  k/ U+ h1 \6 K
  10.             if (this.checked) {
    6 R8 m8 Q4 n2 B+ a- K
  11.                 this.checkedNames = this.checkedArr
    $ L% s8 k/ W) g# |: n
  12.             } else {! B' g7 [' x2 X/ e# A3 Q1 T
  13.                 this.checkedNames = []
    ) Y8 i- o# |: e) Q' l& Y
  14.             }
    . ?2 Q7 G: [& Z& f
  15.         }
    ! s! W3 C2 G4 F; _/ _
  16.     },+ v( j0 ^' x/ d# s% v4 _7 O# |
  17.     watch: {! Q. _& x+ s8 [- h
  18.         "checkedNames": function() {* `: d0 v8 l# g
  19.             if (this.checkedNames.length == this.checkedArr.length) {* P+ |" g  j: |  p$ s
  20.                 this.checked = true
    6 s  J  x$ F+ @( h7 v. O* d0 {
  21.             } else {
    ) Z# h3 K/ l8 R# v8 w& N2 {
  22.                 this.checked = false
    9 x* i  E; Q" E% E8 r( U
  23.             }
    3 q& b. F8 h9 b* Z# v) p
  24.         }* h* l/ y+ u0 a- `+ i% |
  25.     }
    , s: e' H. U! q. s7 Y& z
  26. })
复制代码
) z9 z: K. y- q3 u

) G! \) c& R* a8 _7 a1 m, N* S( J* N8 I) e! A

+ n! M& {! k% n! d9 G/ c" k0 w3 T7 L+ u/ ~# n

! J$ ^, G- |& E8 o  }7 ?' j, u' ^/ D7 C8 Q9 X! |/ k
/ l: V! X$ m9 C8 M8 H  }8 K
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则