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

cncml手绘网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 217|回复: 0

[Vue.js] Vue.js 表单

[复制链接]
发表于 2018-7-4 11:22:23 | 显示全部楼层 |阅读模式
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
20151109171527_549.png
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
2 D. H5 J, x/ P. [4 m
  1. <div id="app">
    7 o- K' p- t9 ~: r' ^' _7 p
  2.   <p>input 元素:</p>
    9 n( Q1 A7 M' j8 S- V
  3.   <input v-model="message" placeholder="编辑我……">  P- U1 b$ T% x
  4.   <p>消息是: {{ message }}</p>
    ( ^1 h* F9 g; u. h1 \; P# a
  5.     * l+ c  o' f5 D% ]
  6.   <p>textarea 元素:</p>4 C3 p5 `9 e$ R. j7 J$ v; P9 l
  7.   <p style="white-space: pre">{{ message2 }}</p>" t4 n  L: l  F  }1 V
  8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>$ e% Q: X/ E: y+ I4 N/ t" t
  9. </div>- |1 J0 f5 ?7 v- \3 k. u8 E8 J8 }$ ^

  10. - E3 H2 ?( [2 |7 Q8 s1 e
  11. <script>
    1 x" G$ Q8 _) \1 P6 [
  12. new Vue({
    9 c* w' I* A: O
  13.   el: '#app',
    5 J. \& @# F3 o- t0 A8 A  M' D
  14.   data: {8 q& D1 b2 U' h1 @" Y. j
  15.     message: 'Runoob',
    / p3 N/ H  N8 r5 x
  16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'$ x% B. I) Q% E+ u
  17.   }
    : c! [$ N' `& i- U8 v
  18. })- ]3 U6 l& v# N) m1 w
  19. </script>
复制代码
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框
以下实例中演示了复选框的双向数据绑定:

; q  l, z2 {) F$ }
  1. <div id="app">
    9 C% U% D7 t' ?& s
  2.   <p>单个复选框:</p>
    ) f* n) Z& I! {/ F  O
  3.   <input type="checkbox" id="checkbox" v-model="checked">& ]/ t, m" j/ ~3 @0 [
  4.   <label for="checkbox">{{ checked }}</label>7 t7 C& \$ ~2 b$ U( i7 r! ^5 w
  5.     : L$ W2 X6 }0 }2 N! _3 s  _3 m
  6.   <p>多个复选框:</p>5 i$ g) N! G% _0 |% L+ O
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">! o) x  \- U8 W. n. f
  8.   <label for="runoob">Runoob</label>, L% W% h9 B- M  u
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    3 C+ f/ `- n+ D5 p6 `
  10.   <label for="google">Google</label>
    9 t6 R% C2 Q, l% ]5 A* ^. t
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">( Q$ @1 F, A( l" L1 {
  12.   <label for="taobao">taobao</label>0 K, a/ J) |" T& H) _5 G* [
  13.   <br>
    8 G0 X. `" }5 R/ D# _/ {2 M
  14.   <span>选择的值为: {{ checkedNames }}</span>
    . ^8 m1 r+ b1 C/ u! T0 z8 R
  15. </div>9 H; Y6 D( C' o

  16. - O4 g& E% Z+ o
  17. <script>3 g3 h5 `! ]) e- }0 `2 z
  18. new Vue({. N6 V2 v7 Q7 G) Y/ X, c, }" g
  19.   el: '#app',
    8 w1 ^) H; t" n. t1 O- W
  20.   data: {- y" E! C& @2 f7 ]
  21.     checked : false,4 k7 q: C" S7 U  `5 Y8 X) n
  22.     checkedNames: []5 @8 Y, Y: {1 c5 ^5 C& E+ V1 _
  23.   }
    2 I. O1 H, y: Q0 i0 l- I, q# C4 p
  24. })
    # C' K3 k0 ]4 f' ?5 ?# y
  25. </script>
复制代码
实例中勾选复选框效果如下所示:
F6855065-AA5E-4BD7-B1F6-2350D4B4B1BB.jpg
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
单选按钮
& q6 Q! ^- L8 X1 k2 j8 R
  1. <div id="app">' k" U# A$ A! A6 {+ w' B
  2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">7 E  A! Q- Q: J# @; H. O. G
  3.   <label for="runoob">Runoob</label>
    # q- y' ^7 c3 `7 O$ L
  4.   <br>
    : k, R' q# |8 [* M
  5.   <input type="radio" id="google" value="Google" v-model="picked">$ c9 j* f/ d! c+ Z
  6.   <label for="google">Google</label>
    / e8 F8 n* H1 u9 H9 p9 x; p
  7.   <br>
    + u+ s6 H+ K3 }+ R
  8.   <span>选中值为: {{ picked }}</span>
    ; Q& X$ B: m. M( v
  9. </div>1 L2 l4 |1 ]) S" p3 E3 p! w

  10. : Q4 S& x! l9 Z2 [- X  R$ F: L
  11. <script>
    " N  T1 ?# r- F- E1 Y9 k! O  V
  12. new Vue({
    3 h8 ]$ [) ?7 e( N7 Y
  13.   el: '#app',/ U2 q6 M; N8 R3 M
  14.   data: {" y7 |: s7 d. N0 u5 i0 ^+ U, L6 c
  15.     picked : 'Runoob'/ u, X! f, Y0 M( m/ {. N
  16.   }
    ! B) Y2 y0 s4 G& {2 K& K, B1 A
  17. })+ }4 W- S. f- t4 [
  18. </script>
复制代码
选中后,效果如下图所示:
F60DA836-0E62-4C78-AEE0-2CFD6A2AE498.jpg
select 列表
以下实例中演示了下拉列表的双向数据绑定:
select2 v# X% k+ T' ?" p8 P. r5 e
  1. <div id="app">
    % {) @/ q( _7 i# j  y
  2.   <select v-model="selected" name="fruit">9 C; r6 p( P: n
  3.     <option value="">选择一个网站</option>; Z8 B& ]8 A0 p/ e) k
  4.     <option value="www.runoob.com">Runoob</option>
    " C8 {: K, L, ]8 v3 u( R0 ?
  5.     <option value="www.google.com">Google</option>+ n% Y% _& K0 V1 m
  6.   </select>) n$ Q: w$ k8 c4 R! F! {, o2 [

  7. ! [& e/ J) A6 \- m3 B1 S; X
  8.   <div id="output">6 L& O/ r) f4 `, m4 D  X. _! t
  9.       选择的网站是: {{selected}}' H. w. S: S7 ~4 ^
  10.   </div>
    ; d* r: |2 v: U$ ]( ^- I  n7 Q) Q
  11. </div>
    $ ~0 F: P# y" X/ z. }

  12. ! J+ z3 l- p& ?3 T
  13. <script>2 _4 b" G0 [1 b7 v* N
  14. new Vue({
    5 n% i0 ^8 h1 K, [# M" v8 o
  15.   el: '#app',, H0 \1 f+ E8 u; A  E& E$ S1 ]
  16.   data: {6 Z6 O* A( D6 Z( R3 K+ i
  17.     selected: '' ! U; @3 P& ^6 ^4 f
  18.   }
    9 p/ y& V5 \: g! r
  19. })
    5 I1 ^5 a4 V; H3 S  h" ~
  20. </script>
复制代码
选取 cncml,输出效果如下所示:
QQ截图20180704112126.jpg
修饰符.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
    2 j; R% L' P1 P4 [5 Q
  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({6 I4 B. ?2 D3 u( r% c5 b9 d1 s2 a
  2.     el: '#app',
    , u, }+ [5 x9 u$ I$ W1 f
  3.     data: {2 @  T: w2 \1 `/ P% o4 c  K8 Z
  4.         checked: false,
    , ~3 A( N0 X( x4 X* j
  5.         checkedNames: [],' A( x5 e$ Y' Y2 r  g* Y
  6.         checkedArr: ["Runoob", "Taobao", "Google"]
    : s4 p. T: z' h1 b# ]1 f
  7.     },
    3 ~# j, w) ?: d3 Z
  8.     methods: {) W2 O$ Q, O3 S- Q
  9.         changeAllChecked: function() {4 ]( p' E7 H! V. q
  10.             if (this.checked) {: z0 f$ y1 p5 ~) h* R) _
  11.                 this.checkedNames = this.checkedArr2 k0 H& M  {  _& l9 B; U0 t
  12.             } else {
    ; ~- q; c/ m$ W+ U
  13.                 this.checkedNames = []
    ) k, R- r( N/ u+ G
  14.             }6 I( p# x# M9 n% E/ A
  15.         }+ {& y( I) n2 q+ ~, {5 }
  16.     },4 A6 t) A* P3 n- R; m3 g# z
  17.     watch: {% F; E8 n) d& S
  18.         "checkedNames": function() {
    ! A% D) X9 _4 m
  19.             if (this.checkedNames.length == this.checkedArr.length) {2 v+ l" u5 ?8 g+ P& B
  20.                 this.checked = true9 W' U& `- P6 I- A
  21.             } else {
    # b1 V7 W& [7 X$ B: e8 j0 ~
  22.                 this.checked = false
    3 a7 V5 |* ]3 j
  23.             }
    ' h# [1 a3 ~1 k4 A# e( `1 C3 @
  24.         }
      m1 s$ H- E/ o" B: H) j0 ]
  25.     }* G+ B9 P9 A% k* c5 P
  26. })
复制代码

1 a; W$ b4 V6 y6 v7 }! d# A8 T& p5 `7 S. V5 E5 c
9 m# z% V& n  F5 ?6 Y' \

+ d& C. R0 Y6 X
. w/ u8 T! P. P$ V  A# O0 n. O' h# Y1 Q9 A4 T( J
+ e: y: K9 }. ~
( i4 w0 Q. O* L7 t6 g" X
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则