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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[Vue.js] Vue.js 表单

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:22:23 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:

) o/ W* d7 x7 r: w" k* p
  1. <div id="app">5 q% g5 u  i" p: b1 b! m7 ]
  2.   <p>input 元素:</p>
    ; h5 o1 ^% F8 i& X- y& S" d: t/ o2 J4 P
  3.   <input v-model="message" placeholder="编辑我……">
    $ o: F8 A" ?  p6 B; K" Q
  4.   <p>消息是: {{ message }}</p>6 `/ @$ x3 }. C; C
  5.    
    : W( C1 C- L, v% e
  6.   <p>textarea 元素:</p>
    % N/ S: ^5 \" v  M9 s2 G0 ^
  7.   <p style="white-space: pre">{{ message2 }}</p>
    . v; W4 p( q5 k) \$ L5 a+ q" H
  8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>7 W5 o+ Z, B" B0 o3 S4 P/ z( y: ^
  9. </div>
    ! P: E0 E$ @1 w# c4 H& Z8 z
  10. & P2 k; r0 l9 O5 t
  11. <script>- w+ G, n7 p% i+ ]. }! W" R
  12. new Vue({* u4 E& R# h) g3 J# M
  13.   el: '#app',
    ; I: F/ X) M2 Z2 F+ Z# O
  14.   data: {% J! X! a1 Q2 }. {
  15.     message: 'Runoob',& i" [. G& \8 [9 [7 f# D. K- L
  16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'/ Z9 W: w0 t8 A
  17.   }+ k: ?7 ]* U6 V
  18. })
    ' r/ G, T/ _* B6 y
  19. </script>
复制代码
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框
以下实例中演示了复选框的双向数据绑定:

5 A/ V# G) C+ _3 R6 i. c: f8 x
  1. <div id="app">
    / {" \( J; a/ q
  2.   <p>单个复选框:</p>
    5 p+ X9 O. D/ ?  y# y
  3.   <input type="checkbox" id="checkbox" v-model="checked">
    - u" u! J1 H  d6 z8 G
  4.   <label for="checkbox">{{ checked }}</label>
    : Z' h! l( M& F0 }3 ^
  5.     " y7 y( A2 I1 U, C# J4 \. U
  6.   <p>多个复选框:</p>
    4 N, l+ T7 A$ o1 T' h6 d- ?& n
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    ( Q$ U5 s! I, c, A6 _0 |; S
  8.   <label for="runoob">Runoob</label>
    9 H( H$ `1 D  i7 j. m  J
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    7 G' g, \& V9 G9 J
  10.   <label for="google">Google</label>
    ( i6 _: c' M( x- e6 P- P+ M
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    6 ?7 _9 I3 n0 @/ R" A
  12.   <label for="taobao">taobao</label>' M& P6 t% u, M/ z( x# B
  13.   <br>' w# t$ x- y9 S2 D
  14.   <span>选择的值为: {{ checkedNames }}</span>7 F& n9 _  F5 `6 t; K5 e1 C5 J% w
  15. </div>
    ; H2 v* X4 C1 ], g4 j+ N+ s0 m

  16. ! e# f* U' K5 j# X
  17. <script>% e% H1 X1 A& c9 T6 e, C
  18. new Vue({% C, u; l$ E: l
  19.   el: '#app',
    % D& P" n  x6 B& X
  20.   data: {
    . S1 h% E: S0 f
  21.     checked : false,7 U& s- c: R8 K: x+ l
  22.     checkedNames: []) K) Z  b$ u8 m' l5 B
  23.   }' k3 E! @% ?- I; i- f* x
  24. })
    $ Y3 i- h% c( l/ X" D# F" b
  25. </script>
复制代码
实例中勾选复选框效果如下所示:
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
单选按钮
; l" r  I/ d  u' @' K& q' Q# p2 A! K; M
  1. <div id="app">
    4 z: S# G2 P8 E6 Y
  2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">/ k8 J9 Y- q4 {0 [
  3.   <label for="runoob">Runoob</label>
    ) p- x& g+ b, ~, J5 j3 v/ ^
  4.   <br>
    ; {4 f; \0 }% z) s' }9 K! s
  5.   <input type="radio" id="google" value="Google" v-model="picked">7 s5 L  D& G) C9 ^
  6.   <label for="google">Google</label>
    " B$ a( L( j1 g- C$ c) }+ g
  7.   <br>
    ; Y3 q; o0 S9 ]1 u* |2 C- o, w
  8.   <span>选中值为: {{ picked }}</span>
    & K* l' S# A: |+ H* l9 g1 d
  9. </div>" Q( p0 O( ~" F9 v+ }

  10. + }/ x; e2 R0 H
  11. <script>
    4 h  o1 q8 q  ]& U( k! _- e% m
  12. new Vue({
    5 O9 `  X  C/ p# N
  13.   el: '#app',- u; o- W: w$ C- q; v( k. ~
  14.   data: {& e' G" C: S; p
  15.     picked : 'Runoob'
    ' i3 b* i3 l; ~9 M( T
  16.   }) a' F4 ]$ F! ?" B8 k
  17. })
    * f! q* B" W) Z# [
  18. </script>
复制代码
选中后,效果如下图所示:
select 列表
以下实例中演示了下拉列表的双向数据绑定:
select
7 `! _& y- X9 ]2 M0 t* `8 ]
  1. <div id="app">
    ; s7 N& q4 n, |: `; [
  2.   <select v-model="selected" name="fruit">4 X0 E- y( j# ^+ {; Z; ?
  3.     <option value="">选择一个网站</option>
    ( s) A! [! p. e
  4.     <option value="www.runoob.com">Runoob</option>4 o: t& ~  F: r; L
  5.     <option value="www.google.com">Google</option>1 |6 l$ J9 r, G7 J7 p; V4 G( S
  6.   </select>
    % d& B' e5 z) q" w% X0 ?2 H
  7. ; ?3 }* Z6 b3 _& g- M- i
  8.   <div id="output">
    0 `" ]+ o$ c: S- a' o" R
  9.       选择的网站是: {{selected}}
    9 R& j; W, V5 l$ z, F
  10.   </div>
    ( }3 r* ]8 w4 Q0 Y
  11. </div>
    : P1 I  G# F% c" ^" a

  12. . {1 ~, H2 R7 T; R/ v- t$ Q! e
  13. <script>0 w! O; A, R# O% E7 W5 B
  14. new Vue({
    ( I. |1 m" T  U& Z* }
  15.   el: '#app',6 {! u* o$ L) l
  16.   data: {
    # p, Q) w4 S# r+ F7 P# {: ~
  17.     selected: '' ( L- [8 X6 S+ O2 b# c
  18.   }
    5 P1 [# T% n) C4 ~  _( w
  19. })
    7 G  m- T4 e. \7 A
  20. </script>
复制代码
选取 cncml,输出效果如下所示:
修饰符.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
    ) v3 i' h0 o5 o
  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({
    : W7 [7 |$ a) q0 I
  2.     el: '#app',
    - T, _0 a' K) W' n4 R
  3.     data: {9 o) y# g) n) ^* j, `. {$ D8 X
  4.         checked: false,
    + y* C7 F1 o# k. f
  5.         checkedNames: [],
    - u) O+ g. R5 Y* N( O
  6.         checkedArr: ["Runoob", "Taobao", "Google"]) o; m1 g( i, i) O4 X( p0 g
  7.     },) M4 ~! {7 w6 g$ O3 x. o* V  s
  8.     methods: {
    2 C8 K' b/ n( ~% _$ ]
  9.         changeAllChecked: function() {
    0 @; b/ {8 h2 ^) _5 d# ]! U
  10.             if (this.checked) {" ^) S# c: _1 O
  11.                 this.checkedNames = this.checkedArr' M" G2 [, H; `2 {- _3 \7 |0 C% d2 j
  12.             } else {
    2 N7 u) G1 y- B  j, A
  13.                 this.checkedNames = []) R- E1 X$ z/ a- a3 w
  14.             }
    0 p$ u0 a' ]. y7 b8 \
  15.         }7 d. u* @( `  L/ g- d
  16.     },; a! a& p/ X- x4 b1 B9 ?4 ^
  17.     watch: {3 ^$ X. ]6 I- C$ ^* V; Z
  18.         "checkedNames": function() {
    " r/ X: v8 d, F* a: v
  19.             if (this.checkedNames.length == this.checkedArr.length) {
    8 Q1 v! Q2 K- e6 F
  20.                 this.checked = true
    1 d; N0 ]  v2 f6 S' @8 L
  21.             } else {
    & i7 S' u" _/ j$ y! T
  22.                 this.checked = false
    ( p0 F( K+ ]" ?1 g
  23.             }
    / M2 i2 A8 S, A; X2 E. Q
  24.         }2 f$ A' [( v1 |/ n
  25.     }6 Z% @, Y; X: z2 S: G, D8 j+ [
  26. })
复制代码

3 a5 ]6 A! D- T9 ~. f( Q
9 K( Z+ g" L3 n
& U, {/ a8 \3 |6 k3 u; k) X& x
1 x5 |0 F7 c6 k( O5 `
5 I/ E9 z$ r) I2 G2 t
7 D+ ?! z) C( F2 Y5 R% d
: o0 _* L$ G( e- l$ _+ y9 j3 V5 n0 ^) S; A- V4 y7 Z
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 04:18 , Processed in 0.060697 second(s), 23 queries .

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