Vue.js 表单

admin

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

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

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

输入框

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

1. <div id="app">
   
2.   <p>input 元素：</p>
   " Z# ^" e- Q  Z. e; V
3.   <input v-model="message" placeholder="编辑我……">
   $ Z$ ?9 |( Y& g/ J& ?
4.   <p>消息是: {{ message }}</p>
   * ]* w) O. W8 `
5.    
   
6.   <p>textarea 元素：</p>
   
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   6 _0 k3 o. D* Z8 u
9. </div>
   9 p: C9 _  {+ b
10. 
    ! Q1 ?6 V/ _& ?% e& Q5 q
11. <script>
    ( R; Z) Q* V5 ]8 A; F. S7 U
12. new Vue({
    * t$ r: N- U0 ?/ C6 N8 Z
13.   el: '#app',
    
14.   data: {
    - Z6 o1 J2 W% d
15.     message: 'Runoob',
    ! g; z- ]8 T7 `9 O0 S' B
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    7 u1 b1 i+ W; M# V
17.   }
    * ^' M) q' x1 z' d) \+ B
18. })
    
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   + r" {1 ^. D2 {( M' Z) L
2.   <p>单个复选框：</p>
   " U2 `" R) o) X, N* `; S7 _
3.   <input type="checkbox" id="checkbox" v-model="checked">
   ' F+ i* Y7 K! @. V! }  e
4.   <label for="checkbox">{{ checked }}</label>
   ! L  ^: @' H7 Y" l
5.    
   
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   ! Y. f  f7 b) {  e, a: H
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    
12.   <label for="taobao">taobao</label>
    
13.   <br>
    ' i; |: p% X# k
14.   <span>选择的值为: {{ checkedNames }}</span>
    . ^. ]% F/ u9 }
15. </div>
    
16. 
    
17. <script>
    
18. new Vue({
    : P, s! S+ C4 d
19.   el: '#app',
    & D  y+ M' Y. Q  `$ p9 y. Q! B0 c
20.   data: {
    
21.     checked : false,
    
22.     checkedNames: []
    ( j! w5 x9 A" V4 y; C9 s$ v
23.   }
    6 h( r: x& Q4 {5 X3 W- ^- Q
24. })
    
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
     |# @0 n9 R  w9 G$ @
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   1 p& h7 k* }7 o! a$ K4 ]
3.   <label for="runoob">Runoob</label>
   $ ?- s2 S* {: M; h6 i! O8 t
4.   <br>
   4 S/ ~9 k1 [3 e4 K. v% H
5.   <input type="radio" id="google" value="Google" v-model="picked">
   
6.   <label for="google">Google</label>
   / P+ n- O) F9 ~/ P8 B; y" G
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   ' s+ k% p1 ^/ q( [* X
10. 
    & N. T, A% F2 y$ c9 l6 {, C
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    4 J% L# [- S) T4 R2 x4 W
14.   data: {
    6 R( _* m0 Y. {- F$ u! c
15.     picked : 'Runoob'
    
16.   }
    
17. })
    
18. </script>

复制代码

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

select 列表

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

select
% {5 ]4 K; X# Q; S# J5 C: \

1. <div id="app">
   1 e, n  R: O6 K6 M1 T5 w6 ^
2.   <select v-model="selected" name="fruit">
   6 i" d; W, b6 i5 w" u6 c$ M6 x0 ]
3.     <option value="">选择一个网站</option>
   7 m7 J: h, Z2 u( @1 k
4.     <option value="www.runoob.com">Runoob</option>
   4 B3 s( u* i1 o6 F& z; f
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   * s4 }, H3 o# R1 b
7. 
   5 [* z* J7 L$ H7 t
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   5 |# B7 ~0 h; C; I1 J! \1 z
10.   </div>
    
11. </div>
    
12. 
    : z; Z$ s2 ^5 g/ M) ]0 Y8 B7 E. x8 V
13. <script>
    4 k2 z( X# }( M$ F& U2 `
14. new Vue({
    
15.   el: '#app',
    9 q2 W9 G! v& @- [% V& H- S
16.   data: {
    
17.     selected: ''
    
18.   }
    : @" i1 q9 @( s
19. })
    5 Q  Z+ H! u5 m3 }6 C1 K% W
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   / F8 g+ R8 M) M# t
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({
   1 `" R' |5 y2 A
2.     el: '#app',
   8 g% {5 }7 W" I, k) l2 W/ \. J
3.     data: {
   
4.         checked: false,
   
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   " j# ^7 M2 X% @& \: W
8.     methods: {
   ; @; r4 Z3 A* H& E* K
9.         changeAllChecked: function() {
   1 @  ]* [3 V: ~
10.             if (this.checked) {
    3 B3 b2 j. w# @) R, n7 f
11.                 this.checkedNames = this.checkedArr
    + t: A; |# {1 ]' B/ L$ e& j
12.             } else {
    
13.                 this.checkedNames = []
    & s/ {# R% r. `  n, R8 I
14.             }
    
15.         }
    
16.     },
    
17.     watch: {
    " J) b( _  w) v- q; L- G7 q
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    
21.             } else {
    . L3 }- C: [0 Y$ k8 |, t3 ?
22.                 this.checked = false
    
23.             }
      ^4 S# m7 {& L8 F! h: J
24.         }
    
25.     }
    
26. })

复制代码

* W! w5 t. Y8 w
+ i" F! {, ]8 Z" E0 v3 l- j
& o0 D( C0 G* U- c
- V3 p9 i% k' A6 G9 z! R
# {- c1 A) g" `5 [1 ?0 K* y
- x8 s# R8 L3 S" m9 L. q- o" p