Vue.js 表单

admin

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

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

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

输入框

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

) y1 H4 y) H! m& Z0 q% h

1. <div id="app">
   
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   ) H0 A4 O9 s4 @
5.    
   
6.   <p>textarea 元素：</p>
   7 `7 A" c0 e/ x2 N" X
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   
10. 
    ' @2 Z/ a  n4 d* d) S( O+ |) c: Z
11. <script>
    & V* v9 \, v( O2 l- z1 X5 t/ b
12. new Vue({
    8 Q( N9 Y& f+ d
13.   el: '#app',
    
14.   data: {
    
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    
18. })
    
19. </script>

复制代码

复选框

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

复选框

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

6 m' f8 E) ^/ b% g

1. <div id="app">
   4 @, j8 M3 l, i% S& q, |) _
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   9 u# g2 l  ^) r/ u
4.   <label for="checkbox">{{ checked }}</label>
   % h  W3 O" f9 G6 C' }% o9 X
5.    
   
6.   <p>多个复选框：</p>
   * ]7 o' r2 x- t) {8 |" E9 q* y3 C) @
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   % a* k% ]2 J/ X( H
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   , p& N* i8 n' L3 r( I# s$ B3 r
10.   <label for="google">Google</label>
    " w, e, I) W0 |) L# N
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    6 U' ]/ W* {: M( f1 `% X3 z  c
12.   <label for="taobao">taobao</label>
    4 ]: W% E4 J4 z5 u1 V! V
13.   <br>
    4 ]: Q2 y. D7 y. \
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    : ^! o. G+ G/ ^" G" S
16. 
    ( a/ ^) v9 y, v- S8 B
17. <script>
    9 n( c1 A; W( I& t* u
18. new Vue({
    6 Y/ g- Y( w4 d+ i1 }: R" }" B2 W
19.   el: '#app',
    
20.   data: {
    
21.     checked : false,
    7 N* [: F, @1 m; F) V2 y8 d
22.     checkedNames: []
    
23.   }
    
24. })
    ' r- F& X# W5 S3 ~% H2 p6 S
25. </script>

复制代码

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

单选按钮

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

单选按钮
- s8 ]0 V0 _& K7 b  @

1. <div id="app">
   
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   
3.   <label for="runoob">Runoob</label>
   ; w1 c' U/ m' u, M9 Z
4.   <br>
   3 A* x. y' O' O4 {$ E
5.   <input type="radio" id="google" value="Google" v-model="picked">
   & q. m( v. n3 u' n  u& |; S
6.   <label for="google">Google</label>
   4 J7 q8 J6 T" O7 R. }
7.   <br>
   + `3 R  L& x( `" \/ \" P, K
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   , n! C3 a# |& e$ L1 d0 z
10. 
    
11. <script>
    ! `  Z2 v7 o% A; g
12. new Vue({
    
13.   el: '#app',
    4 i! q8 D+ S- L
14.   data: {
    6 X- Y7 I2 k3 o0 z3 r5 v
15.     picked : 'Runoob'
    
16.   }
    7 e' r& }# R# x( M& X8 A
17. })
    
18. </script>

复制代码

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

select 列表

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

select
' G9 z8 b. [% g& f$ I  I

1. <div id="app">
   6 p" u2 n' w0 s! K" t4 `& M* D, l! |5 f6 k
2.   <select v-model="selected" name="fruit">
   - W" V; V' m% H% l" p
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   " j4 G$ p% L; J1 v3 |4 _
5.     <option value="www.google.com">Google</option>
   7 y; D$ x7 w4 e0 d! z
6.   </select>
   ! d; |) i- R' q: E' ?) ?" z8 B
7. 
   + }" J) e0 k7 v" k- }
8.   <div id="output">
   4 x/ o8 Z4 |) s7 Y5 p! ]/ R
9.       选择的网站是: {{selected}}
   
10.   </div>
    * [  D7 ~, h4 X& J5 _4 X" y
11. </div>
    . a% Q' T& a8 I
12. 
    
13. <script>
    
14. new Vue({
    
15.   el: '#app',
    
16.   data: {
    5 a; n7 J; \9 C4 @9 I5 s/ z8 T
17.     selected: ''
    6 `- G% D( \/ f+ \0 V
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',
   ) X# z- l3 F) k% _
3.     data: {
   3 L5 M8 N! v- g2 b% {8 T+ I6 b
4.         checked: false,
   6 ^. F% ]2 v3 F& W5 p- W
5.         checkedNames: [],
     R+ t5 q% [$ j9 K6 H4 s
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   " n& \( {" d5 Y; `# A5 Q6 y1 h
8.     methods: {
   " `% Q: X' }2 S2 a4 z3 L( E; Q) ^# u
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    
13.                 this.checkedNames = []
    
14.             }
    
15.         }
    4 h3 X  Z. o& M' D: \2 \. M+ Q
16.     },
    
17.     watch: {
    
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    : f: ]/ [" s) T6 t* U
20.                 this.checked = true
    0 W3 `/ e. z6 h; ]1 B. R% ?: e
21.             } else {
    ( M3 e" R( y5 `7 v; k8 d
22.                 this.checked = false
    2 M; o0 ^2 C, Y+ q5 R2 f; b! e
23.             }
    
24.         }
    & T0 M! m6 W! Z
25.     }
    
26. })

复制代码

# f+ E0 Z, s' B
  ^  |( ^# k1 D6 l, a6 X. |4 _
& `; N  H0 v8 t3 A
, v/ |* T8 {; L& z, L) n

0 P: m& X% |* c( s
' v; n" w/ t$ O7 r
. w# r. r' F' O