Vue.js 表单

admin

这节我们为大家介绍 Vue.js 表单上的应用。

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

输入框

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

0 y; U" T5 |  M  f

1. <div id="app">
   2 G7 n* E: F3 _; S* c% F: O* a, l) Z
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   $ \) I' K* Z% |# _( L3 d
5.    
   
6.   <p>textarea 元素：</p>
   
7.   <p style="white-space: pre">{{ message2 }}</p>
   * l6 r7 A$ L3 }- C* w
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
     E. w/ F1 b- K/ Q
10. 
    
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    
15.     message: 'Runoob',
    & g& p( E- x5 F& d8 i* K& a4 R4 }5 [1 A
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    
18. })
    
19. </script>

复制代码

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

复选框

以下实例中演示了复选框的双向数据绑定：

  G8 A# W7 V9 U' ~) [$ N& Z

1. <div id="app">
   
2.   <p>单个复选框：</p>
   $ A# W1 \! `6 t' h# Q
3.   <input type="checkbox" id="checkbox" v-model="checked">
   - Q" U# C8 _' W! J: c5 W6 X
4.   <label for="checkbox">{{ checked }}</label>
   4 u, h5 K' G9 e! H; H7 N! y( _  \
5.    
   3 q8 ]  B8 i' n4 o/ f
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   " |! P& S8 W, z0 S% R0 B# o
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    1 l; a& Q$ I: e7 N$ `
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    2 D! E( v& K! D# k6 N, w& a
12.   <label for="taobao">taobao</label>
    
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    
17. <script>
    & _0 [: y$ c5 E; E7 u9 ?& @8 ?- T0 ~
18. new Vue({
      U! o% R9 A: V9 p
19.   el: '#app',
    % N# I) ?9 P- d# f
20.   data: {
    $ C; V& D1 j0 S- u* ]
21.     checked : false,
    7 S  g# r* z# R- _) ]/ C* |
22.     checkedNames: []
    # w: H0 c* a  c1 o8 p
23.   }
    2 A# J) X( E6 \) g( h8 {' h
24. })
    . K# G8 k- N* y: _
25. </script>

复制代码

实例中勾选复选框效果如下所示：

单选按钮

以下实例中演示了单选按钮的双向数据绑定：

单选按钮
( }9 ~6 j9 c9 d4 l% z7 q& b

1. <div id="app">
   
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   , @9 ~) m/ z' I8 |7 j2 }& t
3.   <label for="runoob">Runoob</label>
   % M$ e$ {4 f0 m) P8 J6 r+ q
4.   <br>
   
5.   <input type="radio" id="google" value="Google" v-model="picked">
     V, l, j6 H+ j8 v
6.   <label for="google">Google</label>
   
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   / Y, S1 {$ n2 r" c3 d
10. 
    
11. <script>
    
12. new Vue({
    # l  @* L, e- @0 p* n: x$ {
13.   el: '#app',
    2 V/ `! v+ A9 r& n" I4 Y6 @
14.   data: {
    
15.     picked : 'Runoob'
    ! r4 g* w3 B7 J6 ?# d
16.   }
    1 N2 m! h. A) u: q- J
17. })
    + I- U! o9 b+ ?9 J7 m9 Y
18. </script>

复制代码

选中后，效果如下图所示：

select 列表

以下实例中演示了下拉列表的双向数据绑定：

select

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
     y2 P4 M: p; `+ }- p
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   ) P5 M+ D6 ?! x/ v
7. 
   
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
     M0 Q& G" v- K* P; T
10.   </div>
    # ]: C& N8 y3 ~$ h
11. </div>
    ; ^5 p* ]4 v+ O" Z7 |& j' d" x# U- u
12. 
    
13. <script>
    
14. new Vue({
    
15.   el: '#app',
    - X6 a. A$ E0 j) Z$ w9 n
16.   data: {
    ; j6 E+ s. T3 T& F/ D9 @4 z" B
17.     selected: ''
    1 C5 g9 E6 @" u. K
18.   }
    ) \6 [8 a( U( t# I5 x2 O( t* t/ M
19. })
    
20. </script>

复制代码

选取 cncml，输出效果如下所示：

修饰符.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   ' H" z4 o3 t4 \( d
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({
   
2.     el: '#app',
   * i2 a* R/ K+ R8 L# {
3.     data: {
   
4.         checked: false,
   
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   , A+ u- q: i* K1 N' R8 \$ Z& A
7.     },
   2 ^" n2 X1 Z9 G$ }" L6 u' x
8.     methods: {
   
9.         changeAllChecked: function() {
   + Q* f2 h% C! ~' b: _% S; l. [; ~
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    " f( o$ \( _: `  @  s) G. r) M" d6 y
12.             } else {
      L6 i' A1 E' v% _: T, k; ]. ?5 O# d
13.                 this.checkedNames = []
    ( Q+ F3 I; b6 b2 t/ U% f- ^1 z( e
14.             }
    
15.         }
    2 D1 o7 H( b) T  F& p  |9 y
16.     },
    
17.     watch: {
    # u9 _& G& `1 ]- {' a# }
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    7 z8 Q  G( x0 y: h
20.                 this.checked = true
    , f4 ?: U) |$ g6 Z! w" z
21.             } else {
    
22.                 this.checked = false
    5 I* M6 H; x5 b5 i
23.             }
    ! c1 _6 f0 ~6 a) J! ~. N& |
24.         }
    % [# }0 u1 t1 I8 f  E' n' o+ M4 q
25.     }
    
26. })

复制代码

' U) P% E% ^3 v; X$ `* K! a' _3 M

& B! X! i# W, k
5 f! d0 F6 J: v% _- d3 F