Vue.js 表单

admin

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

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

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

输入框

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

1. <div id="app">
   - d6 E. O+ U3 @4 z* V% o
2.   <p>input 元素：</p>
     D' e, ^: D. v7 }# A
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   
5.    
   
6.   <p>textarea 元素：</p>
   
7.   <p style="white-space: pre">{{ message2 }}</p>
   ! x% N/ a2 G- H
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   
10. 
      p. i( A/ S- \6 c: w0 B' h
11. <script>
    8 E2 F5 \7 y' l: l
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    % F$ D& I1 o2 \8 Y) d$ x( Q
15.     message: 'Runoob',
    % @, t0 p. t: R& L! K
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    
18. })
    
19. </script>

复制代码

复选框

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

复选框

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

. b3 H0 Q" t" E; p! |

1. <div id="app">
   
2.   <p>单个复选框：</p>
   - {! A' s9 n3 [4 v) _
3.   <input type="checkbox" id="checkbox" v-model="checked">
   ! d" F3 e6 d9 |7 z% Z
4.   <label for="checkbox">{{ checked }}</label>
   4 t" n: r% I/ u7 Q2 l
5.    
   + U4 B; S* ^& e/ l- A
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   & W7 q, Y; m, b' D$ \3 g
8.   <label for="runoob">Runoob</label>
   ' }  G8 l. ^/ z6 A
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   ! P- S2 y! A/ O0 Y3 n
10.   <label for="google">Google</label>
    , A  ?* R" H/ K
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    ! }, D! c# R+ P+ I) p& i) F
12.   <label for="taobao">taobao</label>
    
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    1 j. S1 v# O' d( u" ]. k: o8 F* w; v* ^1 _
15. </div>
    " m' h. A9 G  ]7 r$ o5 w, t
16. 
    2 Q" g. W" @* I+ B) k
17. <script>
    ; C2 `7 |" d9 A! r
18. new Vue({
    
19.   el: '#app',
    + K  o) @  v* `' R+ X
20.   data: {
    5 ?0 J1 t) b% N4 r( z- H
21.     checked : false,
    ! ~/ x1 `7 I9 S7 y' I% P( S
22.     checkedNames: []
    
23.   }
    7 {: p& ^1 x7 R+ y
24. })
    
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   0 D5 m1 G3 d5 Z4 a
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   
3.   <label for="runoob">Runoob</label>
   
4.   <br>
   
5.   <input type="radio" id="google" value="Google" v-model="picked">
   + k$ k% U* V' w3 Q/ Q, e! O$ E! N1 m
6.   <label for="google">Google</label>
   
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   
10. 
    ; S, F; d4 @# X* L8 W& |
11. <script>
    ! N% @+ S) I$ Y% @6 q
12. new Vue({
    " O1 m( R0 \  {1 g: ]2 w5 h/ A
13.   el: '#app',
    2 @+ R; g2 @8 m3 q- p" j' C6 r
14.   data: {
    + b0 M/ a5 S* r/ @: b
15.     picked : 'Runoob'
    8 z1 k$ o. e, O" t" [
16.   }
    
17. })
    + `! y, |1 ^! J
18. </script>

复制代码

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

select 列表

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

select
% O# {# G* B0 n) t; K0 ^+ ~

1. <div id="app">
   ! Y$ c5 _; \; B+ @8 c
2.   <select v-model="selected" name="fruit">
   : u( H" ~* F8 Y2 O
3.     <option value="">选择一个网站</option>
   7 v( d$ C; U2 _$ v
4.     <option value="www.runoob.com">Runoob</option>
   ; F; |. m" _: }* c4 I8 k; r6 w( y
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   
7. 
   
8.   <div id="output">
   & z4 `3 |& ~: u( q; h3 C1 ~3 d
9.       选择的网站是: {{selected}}
   , G. O) d  i' n; `
10.   </div>
    
11. </div>
    
12. 
    
13. <script>
    0 b; r, F0 n( o4 x% p! X5 Y7 A: y0 ]- h
14. new Vue({
    
15.   el: '#app',
    
16.   data: {
    0 R+ L6 ]( {4 o5 ?/ d0 X$ B* t. x
17.     selected: ''
    
18.   }
    
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   + W) E0 F! g: R& i
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({
   0 @2 z# S6 E8 `' w2 m* i1 c
2.     el: '#app',
   
3.     data: {
   
4.         checked: false,
   + W) R- P$ g, x' f) p
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   ; j# T' P/ m1 z% h8 p
7.     },
   
8.     methods: {
   ) j+ a8 G( v8 W- ]2 L
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    % y; V7 @& j8 P. n9 C
12.             } else {
    
13.                 this.checkedNames = []
    " e0 [  e* y% K2 `
14.             }
    5 K# e: E, l' r& u( O
15.         }
    1 U# _$ B% T/ _: M* x' n$ B
16.     },
    
17.     watch: {
    4 u' X/ w4 i( a* {( @  U
18.         "checkedNames": function() {
    5 I9 A4 M% @. E6 R5 H' Z$ S/ z
19.             if (this.checkedNames.length == this.checkedArr.length) {
    5 `8 j$ B3 d3 I4 n9 w  \
20.                 this.checked = true
    
21.             } else {
    
22.                 this.checked = false
    ' ?& I8 C* ]4 P+ ^5 l, i, T
23.             }
    
24.         }
    
25.     }
    
26. })

复制代码

& ~; q% G; l* N; e! \- m1 w5 l

+ y" m5 Y0 l' i0 P. A3 f* ?" X

+ T2 X3 p% M* j  a* _/ |