您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15680|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 表单

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:22:23 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
$ b" X  w' e& m3 z, ]
  1. <div id="app">$ z' `: U' i# K- z/ {. z7 C4 o% ]
  2.   <p>input 元素:</p>
    * j- h5 e3 Z/ B& i
  3.   <input v-model="message" placeholder="编辑我……">
    - K8 E2 [, N( I7 u8 |
  4.   <p>消息是: {{ message }}</p>) @9 q& p, a5 _: S. I  A% U
  5.    
    - `7 ?: e5 S# I4 ]) Q
  6.   <p>textarea 元素:</p>, k9 b& K- X4 D* S& K! n  k4 v
  7.   <p style="white-space: pre">{{ message2 }}</p>! _( q+ i% Z! M' c. i
  8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    ' A$ m, u1 w7 u+ Q9 n5 @
  9. </div>
    $ ?" Q; l: H( X* [
  10. * O2 [+ s- {# S
  11. <script>- ~, ^6 t& @0 ^( V
  12. new Vue({
    " i2 P9 l6 V1 |; t9 j4 q+ B
  13.   el: '#app',
    % _  N) x8 ?5 Z; ~( i7 t
  14.   data: {
    / O) H0 j2 k: i9 R
  15.     message: 'Runoob',
    # n) v9 J' m, P7 I; D2 \
  16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    " b. U! y& r/ l
  17.   }
    ) C0 \: ?. U# C8 x" F" J
  18. })
    3 k( n5 w+ W9 q
  19. </script>
复制代码
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框
以下实例中演示了复选框的双向数据绑定:
7 y6 q7 J7 T. E6 c3 x
  1. <div id="app">9 m& r0 \1 y) X- ]8 p
  2.   <p>单个复选框:</p>4 `) f9 Q8 q+ j5 Y4 p1 ]9 r
  3.   <input type="checkbox" id="checkbox" v-model="checked">
    3 @/ y" \+ o  f7 R" f# ]+ j* i
  4.   <label for="checkbox">{{ checked }}</label>5 V! w( }7 E5 R) B
  5.    
    ) ^, t* F% N- W, d
  6.   <p>多个复选框:</p>' K$ u; \$ T) c. y4 C# N8 D
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    6 P; t: {# C* }8 n1 H6 ~
  8.   <label for="runoob">Runoob</label>
    + p3 v5 Q+ j2 z. O. `
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    ( `( d. D. ~7 v' P, U4 a
  10.   <label for="google">Google</label>
      H' ^) p6 H" O! Y
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    ) x+ X  M6 a: I7 ?( @
  12.   <label for="taobao">taobao</label>
    2 |3 L. y4 |" `7 j8 Q4 h: Z. |+ J
  13.   <br>6 j8 q- |9 U0 J  _! B" {
  14.   <span>选择的值为: {{ checkedNames }}</span>" W% o& r6 f7 l$ \' Z9 X+ y
  15. </div>
    : }. T! j, C! S( \
  16. 0 w! y: C" a! U. s3 O
  17. <script>
    " r0 J* ~/ [2 y4 E- h/ b- B
  18. new Vue({
    ' g) f# l% S4 H# F. j
  19.   el: '#app',$ @: I( v) y; Y& l) S4 A) h
  20.   data: {
    ' V/ F; h! M) E& w" h! p
  21.     checked : false,7 }, h2 i4 h( T$ V: i
  22.     checkedNames: []
    / \' r6 ?5 Y/ u& ?, y" c
  23.   }+ ~6 u3 l$ M8 t1 {2 O3 s- e! {6 ~
  24. })
    - B: [: ~; P% m
  25. </script>
复制代码
实例中勾选复选框效果如下所示:
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
单选按钮
  y' K2 {& `( P0 L6 y
  1. <div id="app">) a3 q" b) [/ a. A$ W
  2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">/ e! j- ?( G7 J1 m# Y2 v
  3.   <label for="runoob">Runoob</label>2 h: l# Q) M7 R
  4.   <br>
    % T  m* m1 Y$ D0 a5 h1 Z$ R0 ]
  5.   <input type="radio" id="google" value="Google" v-model="picked">
    # z6 `+ v  O& X' D' ~3 ]5 R- x
  6.   <label for="google">Google</label>3 s* m6 ]" i) K6 x" C
  7.   <br>$ v4 B% Q# M) L3 K- H/ a2 a
  8.   <span>选中值为: {{ picked }}</span>( Z) H- a7 f. K" P7 n4 }: k! D
  9. </div>
    ) F3 P: i9 f- w# C3 r# W9 L4 `& ?9 X

  10. $ p. z4 ~: \  s) \" N/ S
  11. <script>, u# L* `# _+ ]. e$ m
  12. new Vue({
    . Q1 t! e* R  W
  13.   el: '#app',, t' ?$ q; M  u: n% m
  14.   data: {9 E2 z' U- _9 U  u- W$ I: M
  15.     picked : 'Runoob'
    9 w1 r3 j' @- y* c( S
  16.   }9 i1 Y9 u; U' ^' j
  17. })
    * L6 ?: E. l  X
  18. </script>
复制代码
选中后,效果如下图所示:
select 列表
以下实例中演示了下拉列表的双向数据绑定:
select
2 s- u9 s+ W  m; _& Y: c
  1. <div id="app">
    3 G, S4 J' c0 V" A+ h
  2.   <select v-model="selected" name="fruit">
    1 W' _4 S' g0 x0 y, O4 _* [
  3.     <option value="">选择一个网站</option>, [! h! Q8 \2 E3 n& p" G4 L% j
  4.     <option value="www.runoob.com">Runoob</option>/ h1 [' C4 V. Q9 X$ E6 @
  5.     <option value="www.google.com">Google</option>, C; z0 ^# |) L' p4 T
  6.   </select>- N; ~+ B" ^+ z! o. P5 R+ T

  7. 3 D+ v- J5 A: M( d) o; D% |6 u
  8.   <div id="output">
    + D/ g4 o- Z  i# p% M) \
  9.       选择的网站是: {{selected}}
    2 T! m" o4 J% Z! B+ X: \9 W& p
  10.   </div>. k1 ^6 N: }1 X* M- Y
  11. </div>6 I; Y) i; O- t) x  F2 w
  12. 6 s7 s1 N1 R) s, ^# ^( f! y, S& }/ l
  13. <script>% r& O5 _# R1 P$ ]8 ]1 p
  14. new Vue({, o. {) E6 U& h% _# y: x1 T  V
  15.   el: '#app',
    " U: i  W; h& c
  16.   data: {
    % o1 Y! \& g9 _
  17.     selected: ''
    2 Y# ^/ `8 J( \: J, }0 n+ Z
  18.   }9 S; u7 C, h! K. n" @
  19. })
    5 F- R  B3 Y% N
  20. </script>
复制代码
选取 cncml,输出效果如下所示:
修饰符.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->- _8 q# T; }7 F( \# T
  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({7 |. R2 e6 G6 h
  2.     el: '#app',5 `  ^( z" Y8 y
  3.     data: {
    3 x  b5 J, Z$ l1 H
  4.         checked: false,
    0 v9 N. [* r2 S, |# @% Z
  5.         checkedNames: [],
    / j2 Z* f& N6 c# t( ]" i
  6.         checkedArr: ["Runoob", "Taobao", "Google"]. ^' o- q% M& r0 M
  7.     },2 e2 Q0 q# G' |: R$ i
  8.     methods: {! m3 Y; T% a: b3 ]1 E* m
  9.         changeAllChecked: function() {  A& D0 F) B9 I# y* J, G
  10.             if (this.checked) {0 P; x4 T& z# `+ b) X$ n7 x
  11.                 this.checkedNames = this.checkedArr
    ( J, @& `1 p) ^$ Z
  12.             } else {' ?: r0 B, w5 ?: X" H& k
  13.                 this.checkedNames = []
    : v# Q, E- P, h
  14.             }
    ! t, _7 ?/ P* N  k5 v2 s
  15.         }+ l/ W8 X! X: n- R3 K
  16.     },
    - [  D# o& O4 F+ k. U1 j2 j
  17.     watch: {2 o- A1 F, A, B7 [; B9 i
  18.         "checkedNames": function() {8 }; T( z$ r; D' [2 `* }
  19.             if (this.checkedNames.length == this.checkedArr.length) {& [1 V4 z0 D( O5 T$ m
  20.                 this.checked = true6 ?7 l& u6 t8 I* {& v9 I! q) d- W
  21.             } else {* Q8 }! q; K3 T, q
  22.                 this.checked = false
    / q0 q* p; t2 `/ G: D) x
  23.             }
    : }% [) ]/ A$ Z0 V; h
  24.         }3 k- F1 e$ L" \" |7 }/ @. e+ H
  25.     }. E- J. b  c# X( T: ^/ C  G2 F) g
  26. })
复制代码
+ R7 L. a# ^. J; {& U; R5 c

  l% n+ l7 Y2 D# Y; q" L* H' r( M) y# F) C
- G4 {6 O0 @; b( ^/ w

& c0 R& ~6 N$ V$ Y8 `5 Z# J0 M* a2 o! P
! b! l4 [% I' d  V. R! x0 U9 X; S& L0 Q- `% S

4 b3 ~/ L: _+ d; k
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 05:40 , Processed in 0.071286 second(s), 24 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!