Vue.js 表单

admin

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

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

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

输入框

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

3 @4 W4 L7 f8 |9 z/ v1 b

1. <div id="app">
   : D6 j6 a2 j1 e# o9 L
2.   <p>input 元素：</p>
   5 Z" e1 U9 r2 H3 a+ ^( ^
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   2 S) {4 Z! M1 S! C6 M2 N, ^3 g5 s
5.    
   
6.   <p>textarea 元素：</p>
   % m, X7 R3 M3 Y- b# R
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   ! _+ P$ U0 G3 w
10. 
    
11. <script>
    : ^$ p4 K- _% R/ c. }; D
12. new Vue({
    1 Z) z5 |; k0 A2 L1 i
13.   el: '#app',
    2 `7 g5 e# s8 n9 M" D6 ^
14.   data: {
    
15.     message: 'Runoob',
    - y7 s3 r3 W7 c2 G" ]
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    
18. })
    7 T% I/ g2 y3 E, i" Q
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   0 L! R- H# }$ d4 G
5.    
   
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    * X" o2 P0 ^( f/ X. U; x
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    * v9 D. S2 f3 e3 j: H9 W
12.   <label for="taobao">taobao</label>
    
13.   <br>
      J4 {2 O0 p1 j4 C+ }1 @
14.   <span>选择的值为: {{ checkedNames }}</span>
    & K1 z) _# L9 P, h7 D- s( M9 `$ z
15. </div>
    + e( k: x/ N' k
16. 
    / d, ?, \% b; b
17. <script>
    
18. new Vue({
    
19.   el: '#app',
    " F0 n6 J; J  b% D' R6 Y0 C
20.   data: {
    
21.     checked : false,
    
22.     checkedNames: []
    % T- W8 q( Y# F0 L1 s
23.   }
    
24. })
    4 ~; H& Y8 s8 z; S: Y3 f. u6 Z* i8 _7 h
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   5 J, J* O; ]0 }5 Y+ n
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   
3.   <label for="runoob">Runoob</label>
   
4.   <br>
   1 s. I% g- {9 p, q# o. V
5.   <input type="radio" id="google" value="Google" v-model="picked">
   
6.   <label for="google">Google</label>
   # V( c3 {0 m5 o3 V7 x0 f
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   9 O) M: L4 O# ]- L) F6 _
9. </div>
   
10. 
    % B( F% w9 @" u7 W$ K
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
      w; u% b- `3 X" C9 M, l
15.     picked : 'Runoob'
    
16.   }
    
17. })
    
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   2 n  m+ _  @  {9 H5 o/ V
4.     <option value="www.runoob.com">Runoob</option>
   6 @. M4 \  l2 e7 ~7 j: ^' T- r
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   ! Y9 E. P8 R9 B
7. 
   ( _6 Y8 `. D8 @! P. d7 G8 D9 v* U( t+ Q" ?
8.   <div id="output">
   4 X$ k1 b! q' X, z! B0 s
9.       选择的网站是: {{selected}}
   
10.   </div>
    
11. </div>
    7 I. O3 @5 O& v; t
12. 
    
13. <script>
    ' {- C- Q% b9 n2 H! {+ r+ y
14. new Vue({
    
15.   el: '#app',
    
16.   data: {
    
17.     selected: ''
    
18.   }
    
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   
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',
   4 q$ Q2 S) m. Y, @7 U$ C2 S& Y6 }
3.     data: {
   ! V0 w. x4 I% G: ?  e0 _( ]
4.         checked: false,
   7 G# S: s, l/ |; g) u7 j8 B
5.         checkedNames: [],
   ) M4 a2 O* u0 B- h0 }. _  H. U
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   ' V: D5 W8 y& c
7.     },
   # @  n6 F4 I: s" u, P+ o
8.     methods: {
   
9.         changeAllChecked: function() {
   " y0 f  n; {; ?+ [6 ^7 b
10.             if (this.checked) {
    ! i2 d8 e/ B2 k% U6 ]3 @- P) W, U
11.                 this.checkedNames = this.checkedArr
    - x$ [& U, h$ |
12.             } else {
    ! c; A" _8 \4 e1 C3 `
13.                 this.checkedNames = []
    
14.             }
    
15.         }
    
16.     },
    " y6 J$ ^3 U9 j4 D& |
17.     watch: {
    
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    7 m+ z; _* p$ K' a8 X
21.             } else {
    
22.                 this.checked = false
    
23.             }
    
24.         }
    
25.     }
    
26. })

复制代码

, _" J0 Q) W5 j' \

. q/ E7 I& T; p
9 w2 L) C: B2 ?4 f; u' d
# z9 a; t. o" m# z5 G& t: v# ]
( I; [: y7 H* G: A( X
+ T; _# g( A6 u7 v# ~5 u