Vue.js 表单

admin

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

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

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

输入框

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

# {/ M, ]7 F. e: A

1. <div id="app">
   
2.   <p>input 元素：</p>
   6 r& o$ m" b( @: o
3.   <input v-model="message" placeholder="编辑我……">
   $ h2 D& F$ w+ ^5 ^1 L( H
4.   <p>消息是: {{ message }}</p>
   9 p7 e: K( y! e  b9 B
5.    
   
6.   <p>textarea 元素：</p>
   
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   1 m0 Z( ~& k' b, G$ ^" c3 N
9. </div>
   ( m" s$ T! n: `* X3 T" a
10. 
    2 N+ T) j9 k) T! Y0 T
11. <script>
    
12. new Vue({
    5 e* P* \: b5 C4 l; t& U
13.   el: '#app',
    3 |$ \1 x+ X" G/ V
14.   data: {
    $ F! y# g# u+ b9 Y
15.     message: 'Runoob',
    . o" ^$ P8 F# n9 L
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    7 ]- l6 g, o! X1 r$ n
17.   }
    0 d3 V; \! [2 Q% `
18. })
    : A7 C3 _+ b: V/ x5 D2 D4 r# M
19. </script>

复制代码

复选框

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

复选框

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

0 w+ D/ y9 z+ X. y4 M

1. <div id="app">
   , q* f0 D  R7 m5 |
2.   <p>单个复选框：</p>
   1 g" ^& l- E" Y0 P1 _' g. F; Y
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   
5.    
   
6.   <p>多个复选框：</p>
   : ~. R: j8 _/ C- z1 O& b1 o
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   , ]1 o# Q! S+ t( X: }
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   $ z' C; ~1 {/ {; P2 A- X  U7 p3 I
10.   <label for="google">Google</label>
    2 X- Q1 l8 Y9 Y! N7 X4 g& V  @
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    ; w) Z- O, `1 O2 F2 s
12.   <label for="taobao">taobao</label>
    
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    1 |* t4 I" D+ R7 H5 t) V( l0 _
15. </div>
    
16. 
    
17. <script>
    
18. new Vue({
    $ t3 k( @0 n; e. F, R
19.   el: '#app',
    0 O- P, k2 M8 W- N6 O
20.   data: {
    4 ^8 e" R( I3 _3 H+ N
21.     checked : false,
    : b8 P4 M; Y! B; S/ F
22.     checkedNames: []
    
23.   }
    ( T# q6 A0 W' U% @" V% Z
24. })
    ! D" G3 ^- ^$ S
25. </script>

复制代码

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

单选按钮

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

单选按钮
  \' [9 j1 F# `$ Q

1. <div id="app">
   2 L; C+ l. D! C3 ~7 F
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   % X5 m0 Y0 ~) f# n2 O$ ?; n. q
3.   <label for="runoob">Runoob</label>
   ! m$ C/ n* k8 P, n6 d$ ~
4.   <br>
   
5.   <input type="radio" id="google" value="Google" v-model="picked">
   . @" @  R2 d$ K" ?% _0 t+ P
6.   <label for="google">Google</label>
   
7.   <br>
   9 c  n" w- a  i, D% s0 A8 r, A
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   
10. 
    
11. <script>
    # G3 C" I; t' D+ {
12. new Vue({
    6 C3 A1 m9 W8 ]6 ^) W
13.   el: '#app',
    3 O2 }$ H1 L2 X; k% f2 _2 V( @
14.   data: {
    
15.     picked : 'Runoob'
    * M1 d! U# O, D% ]
16.   }
    
17. })
    
18. </script>

复制代码

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

select 列表

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

select
  t8 g$ M" X& K8 `

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   9 s" B4 p" |6 ~* m
3.     <option value="">选择一个网站</option>
   9 Y! Y* R8 Y" e3 U9 w. J6 K
4.     <option value="www.runoob.com">Runoob</option>
   . z' n0 h; O( g. _  }) F
5.     <option value="www.google.com">Google</option>
   6 Q" r: r. |7 Y
6.   </select>
     O, `: s# N9 t  s  T4 U
7. 
   ( \7 j; n5 _9 S' g1 F$ F
8.   <div id="output">
   * o, L$ U2 {7 h
9.       选择的网站是: {{selected}}
   
10.   </div>
    : D/ A9 h, j2 t
11. </div>
    
12. 
    
13. <script>
    , k# g# q/ K0 _6 N
14. new Vue({
    & ?  _$ k# t3 @
15.   el: '#app',
    ' d4 o1 p! Q# F4 l% l( c) r
16.   data: {
    
17.     selected: ''
    ' M; ^+ Z+ Q& O, N6 k
18.   }
    
19. })
    1 B/ T! a* _: g* m% E
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',
   
3.     data: {
   
4.         checked: false,
   ( i6 _# e( H- s8 t- v9 P
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   
8.     methods: {
   
9.         changeAllChecked: function() {
   7 @/ C4 q* {4 \$ V. T$ v0 Q7 F
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    + @- S/ D2 R" {
13.                 this.checkedNames = []
    1 v4 C( d# u$ `2 A+ @7 Z$ }, i
14.             }
    
15.         }
    3 k6 {8 L$ O  ]8 }: M5 K1 V9 e
16.     },
    
17.     watch: {
    
18.         "checkedNames": function() {
    ' B9 |; S6 X! ?: L+ n
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    
21.             } else {
    
22.                 this.checked = false
    $ k* o+ D; L) u$ {, ?8 B6 }
23.             }
    
24.         }
    
25.     }
    
26. })

复制代码

3 G* h4 }& |) j! n5 a
. q+ k; w* X7 z; t6 `1 r5 S, j