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

cncml手绘网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 312|回复: 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 ~$ H4 t2 Q) P6 g4 {1 t
  1. <div id="app">/ g& F4 G3 z! O7 @2 s; _$ @  q
  2.   <p>input 元素:</p>5 |) X0 ~5 f- R
  3.   <input v-model="message" placeholder="编辑我……">5 J9 V* M7 y. P- l1 e% v
  4.   <p>消息是: {{ message }}</p># d# F, p9 a& ?4 L$ t  N$ F
  5.     5 W) d: y9 V% Y3 w5 O: s
  6.   <p>textarea 元素:</p>
    8 [1 g6 u9 x; J/ O
  7.   <p style="white-space: pre">{{ message2 }}</p>
    * ?- a' q8 H# ^' f0 @
  8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    7 U( n3 V: p) @4 |9 z& Q: q
  9. </div>
    ; x" h, A7 P& v  X6 t; t

  10.   _* t: p, G, T
  11. <script># u9 C( V" l* |
  12. new Vue({7 K& ^! {' S' D" e$ g( ]9 ~
  13.   el: '#app',  t  B3 J; E1 w& P9 U/ E
  14.   data: {. h/ b, M7 }* o  T- G6 `
  15.     message: 'Runoob',
    8 `& d1 e- p3 E+ w, U& W
  16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    ! h% A) G3 w- i7 b+ T- x! V3 P+ U
  17.   }2 F* O) Y0 F3 C3 p
  18. })1 V8 ^9 U! L8 M
  19. </script>
复制代码
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框
以下实例中演示了复选框的双向数据绑定:

, N, s) x7 J7 p, m1 A9 O) _, \
  1. <div id="app">+ X( p/ f" @8 O: W* Q4 M2 B' X2 R5 k
  2.   <p>单个复选框:</p>
    2 N* v) w  f8 f" z+ _: F
  3.   <input type="checkbox" id="checkbox" v-model="checked">: n! p, m  [: W5 g2 J
  4.   <label for="checkbox">{{ checked }}</label>
    , O3 ]" }! r6 R
  5.    
    ' a( R  i- p1 t7 [8 O: e" |% l. K; ~
  6.   <p>多个复选框:</p>% ~9 q* ?* q7 y0 K
  7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">8 {  k1 V% Z- V. {3 s
  8.   <label for="runoob">Runoob</label>% t& B: d6 I$ M
  9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">( L4 O& v8 U7 d. I9 I3 Y
  10.   <label for="google">Google</label>
    0 H# C. h0 L! d: [1 Y
  11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    8 b: z+ ]: N4 I0 Z$ v' e( w( q* Y
  12.   <label for="taobao">taobao</label>
    - m3 P/ j, E" `+ V; k. Z
  13.   <br>& `+ F+ e+ j/ A9 k- g2 T1 m
  14.   <span>选择的值为: {{ checkedNames }}</span>7 L5 Y, d. s  a* q# t
  15. </div>9 l# E1 {: G: [

  16. ( k' `2 }4 j9 l  I% n( S  p* o
  17. <script>
    ! ^4 g" K8 T+ A, U$ i
  18. new Vue({9 u4 i6 V1 c* d# a
  19.   el: '#app',, l/ T, U- @2 p! @
  20.   data: {
    3 R- \( X  u7 v9 [8 _8 r
  21.     checked : false,) g" T/ H; B$ w# r! |; w+ q8 ~
  22.     checkedNames: []- J9 v) `4 X: x/ ?3 G' ?6 }& r
  23.   }5 J2 d, k' w7 _& y
  24. })& G: c7 o. @" R  U) d6 J9 w: z: o
  25. </script>
复制代码
实例中勾选复选框效果如下所示:
F6855065-AA5E-4BD7-B1F6-2350D4B4B1BB.jpg
单选按钮
以下实例中演示了单选按钮的双向数据绑定:
单选按钮4 W/ v: S( F& g/ A8 |! v( w, J
  1. <div id="app">2 a. O" T: D# K& H0 A3 M
  2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">6 F* R$ r' F2 ?* ~+ X5 V4 b
  3.   <label for="runoob">Runoob</label>/ u- E& ]8 X1 _
  4.   <br>; |7 W3 p! {2 s
  5.   <input type="radio" id="google" value="Google" v-model="picked">
    $ G' ~+ a3 C* d/ x' Q# n
  6.   <label for="google">Google</label>5 O$ x6 a% Z! g# w4 p3 M, `. }- H
  7.   <br>
    $ B+ z+ }3 V( m( }7 F2 E& P
  8.   <span>选中值为: {{ picked }}</span>
    ' p$ O4 f% ^8 f# ], }
  9. </div>7 i. X- a# k, u' I

  10. ! I- u7 ]1 F4 J% K: ]* o
  11. <script>$ }) u( a, o0 s6 Z; E2 z. {
  12. new Vue({1 Z- }: j5 h& K& [# R
  13.   el: '#app',% ^, L+ F* X- w
  14.   data: {
    : `& u& |0 {( N2 u  S% Q
  15.     picked : 'Runoob'
    3 _: p4 q) w: ?  I' r3 ^- _: J
  16.   }; _" C7 `# u3 g2 f3 b
  17. })" c0 [, ]  n# L9 T6 _& H/ O+ y
  18. </script>
复制代码
选中后,效果如下图所示:
F60DA836-0E62-4C78-AEE0-2CFD6A2AE498.jpg
select 列表
以下实例中演示了下拉列表的双向数据绑定:
select
9 H& _+ n8 Q( Y& Z
  1. <div id="app">
    7 S- |5 O4 s  ~# O
  2.   <select v-model="selected" name="fruit">
    0 Z. a  r+ a1 P
  3.     <option value="">选择一个网站</option>' E2 J1 z+ Z, b& i; P$ |/ {
  4.     <option value="www.runoob.com">Runoob</option>, [" I; ^, v6 f, l; F
  5.     <option value="www.google.com">Google</option>( k4 e7 c8 N- \
  6.   </select>/ z/ X& t, l" b$ X

  7. 0 V; m" R9 ~. X/ Z: q# H
  8.   <div id="output">) `0 k' m/ s' s& ]3 r
  9.       选择的网站是: {{selected}}- L/ S6 U" T. B* _" ?" C* J
  10.   </div>
    8 R( E! x4 |- u0 A3 D' W/ x+ Y9 Q. E. W
  11. </div>, ]0 B- K3 Z5 R  {- p1 R

  12. 9 a3 L* {1 x! A
  13. <script>
    . `- x% Z4 p3 b& z
  14. new Vue({( o4 \' H" @4 z# t" c5 N1 G; v5 m
  15.   el: '#app',
    - _/ ~$ [4 s0 q% u( C
  16.   data: {; H: Y( R/ s$ v, h
  17.     selected: ''
    4 Z+ E* a1 E# J  W! p1 W
  18.   }
    2 y& o, E6 o$ R0 ^  k
  19. })
    1 R' t: }/ {5 i$ x; y0 M
  20. </script>
复制代码
选取 cncml,输出效果如下所示:
QQ截图20180704112126.jpg
修饰符.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
    % X, i# M5 i- _2 U2 t4 `
  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({4 Z) M0 Y/ D" r
  2.     el: '#app',
    & _- b  Y7 A) m8 c* r, [
  3.     data: {
    7 g, j& _4 J# x
  4.         checked: false,$ J4 \4 j2 N5 @" i
  5.         checkedNames: [],
    ) T2 B& M3 H& \7 k7 S# L
  6.         checkedArr: ["Runoob", "Taobao", "Google"]
    : t& G4 j! j! P/ ]
  7.     },
    # }% X* p* a- R( M( `
  8.     methods: {4 _# d$ E2 \) z& n0 k, o
  9.         changeAllChecked: function() {7 w1 i) l; }) s# @
  10.             if (this.checked) {
    , Y$ ^: h+ u% J* a7 [0 _# M1 A
  11.                 this.checkedNames = this.checkedArr
    ( |# w& \( _% n
  12.             } else {
    & Y; B' `) u- v8 v- M& L
  13.                 this.checkedNames = []
    % M: {9 N. J& t
  14.             }  m: e3 P3 K5 Y) H3 j
  15.         }) F% y; ?; x! x* z+ v" N
  16.     },
    : I: U2 M0 h# k' i% i+ X
  17.     watch: {
    . X) m8 I; L& d* s: Y2 O3 E
  18.         "checkedNames": function() {7 M$ I6 p8 L7 z3 p; X
  19.             if (this.checkedNames.length == this.checkedArr.length) {
    + d- L6 p' A6 i' _' U% Y
  20.                 this.checked = true& j2 E5 p6 {7 L$ j8 G, f
  21.             } else {- C7 m) t! i, |% X5 T
  22.                 this.checked = false3 D* v4 x- `3 ]; R8 g
  23.             }& _  ~3 B! j' o) K6 S8 _$ B
  24.         }# G* X2 I' p% s% @. }' x+ p
  25.     }( I% y6 r8 c, _. k2 }  n7 U! n
  26. })
复制代码
6 S! ^/ I: z; Q$ ?/ z
- F5 P" w1 [* v- o/ U3 k1 M

" Q3 t" k8 f) h5 F' q( m9 B4 o; K5 I: ^

" k: j& m: Z$ Z# l2 O# P
- r6 p. O# H/ b! P; G7 i
/ R' D* }+ o9 p9 w4 e8 j$ g5 Y9 R" P5 x- u
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则