Vue.js 表单

admin

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

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

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

输入框

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

3 e4 \, O( f2 A7 l3 A! {2 A

1. <div id="app">
   
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   
5.    
   
6.   <p>textarea 元素：</p>
   + P, s# [% z/ ?) @( M1 x& t
7.   <p style="white-space: pre">{{ message2 }}</p>
   6 c' B; w9 H3 E4 ^# H
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   ) z2 {0 {1 r9 k( S, k
10. 
    
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    6 o  z- l+ n( f& A. ]
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    ' o9 @3 Q5 ?  Z( ~, r
17.   }
    : k2 L  p) C7 t( _
18. })
    : P# U- n: L. J. U/ P7 d0 R, ^' p
19. </script>

复制代码

复选框

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

复选框

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

9 D) P" \4 x: C; ^2 ^

1. <div id="app">
   
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   
5.    
     ]: H+ m0 w8 B% H( L# [
6.   <p>多个复选框：</p>
   ! ]7 H" ]% E, y
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   6 o9 B6 V5 C) e9 q8 f: Y
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    6 q: e4 z+ u2 f1 v: c: f9 f3 p' b
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    
12.   <label for="taobao">taobao</label>
    9 e- m# Z$ e( K# R
13.   <br>
    2 h; H- E3 K# w9 R$ m$ B. |
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    
17. <script>
    
18. new Vue({
    # T/ ]( Q+ e: j; ]
19.   el: '#app',
    
20.   data: {
    
21.     checked : false,
    
22.     checkedNames: []
    1 F0 B+ e- |0 K: O% T
23.   }
    
24. })
    
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   
3.   <label for="runoob">Runoob</label>
     O, k2 Q: K: E
4.   <br>
   
5.   <input type="radio" id="google" value="Google" v-model="picked">
   
6.   <label for="google">Google</label>
   ; I* ]0 D4 X0 w) t$ v' u
7.   <br>
   5 r8 S0 n+ P4 M" p9 ?9 s, l7 E3 M  y
8.   <span>选中值为: {{ picked }}</span>
   9 w7 m, y% j6 }/ x% P
9. </div>
   ! ~. @+ M0 {7 B; V: }
10. 
    ! j3 o* T1 N$ v$ g& r: k
11. <script>
    6 B( u+ c3 o3 O2 _
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    . e& s9 k7 S. q* e( V& H
15.     picked : 'Runoob'
    ; T1 {* E9 `& K( c2 V
16.   }
    ; y. h5 ^* A! Z' k" o) `- G' B# h4 c: Y
17. })
    # W6 j0 I7 @% ]) ^
18. </script>

复制代码

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

select 列表

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

select
$ v0 N' m: O- X  w' g0 X# }0 H

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   8 h1 v! d+ _4 S
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   + X1 h, U" C. h2 X6 Q7 b
6.   </select>
   ' O7 H) ~7 @5 [# D- z
7. 
   ; k: L$ J5 X3 V4 w! d! w
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
     y" T! R, G5 B; h2 \* `  ^% ~4 n1 H4 i
10.   </div>
    
11. </div>
    0 o7 s; z6 h: I6 B( P0 z, ]
12. 
    4 ~: J- x$ N; c6 M* n4 E
13. <script>
    
14. new Vue({
    ( g' T* X; L5 u- Q7 J0 ?( ~1 B- P
15.   el: '#app',
    
16.   data: {
    
17.     selected: ''
    $ S9 K" o3 h; w3 O& ~4 }
18.   }
    
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   ; A* j1 k6 U3 s* ]8 N0 v
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',
   
3.     data: {
   9 F" r9 ?" Y. H  M* p' s
4.         checked: false,
   . \5 @+ c) t3 K7 p
5.         checkedNames: [],
     w0 f$ d* e" y5 ~2 Q7 N
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   " Z0 N, w) T1 [8 m- \; ~
8.     methods: {
   
9.         changeAllChecked: function() {
   % G; g- b7 z8 y' K5 p) ^
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    
13.                 this.checkedNames = []
    
14.             }
    
15.         }
    
16.     },
    
17.     watch: {
    
18.         "checkedNames": function() {
    - o: R! g+ r4 X7 i: }( w
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    
21.             } else {
    % j; k; Z8 s2 p" @
22.                 this.checked = false
    
23.             }
    2 }$ p' z4 L; k7 O' l  M
24.         }
    
25.     }
      q3 s  F4 T3 R# ^! M: m
26. })

复制代码

, T& t. F" K3 j( R* s- r

. ^; z. a4 a/ o& S
4 |- n- |; ?3 K) _  s4 l( y/ k
+ ?/ x) s5 `! l
9 h2 l# S: [/ P. `% ~# P( w: o5 ]
  z5 ]/ x/ E2 W
$ I, b0 Y# |4 t+ @7 y8 k# k) F