Vue.js 表单

admin

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

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

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

输入框

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

* G7 G6 D0 g: c, N, u

1. <div id="app">
   2 q- ~# X! R+ b4 _* k, f  q
2.   <p>input 元素：</p>
   + @, Y8 k3 ^- A
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   2 e2 i& U3 M5 A. i, h
5.    
   
6.   <p>textarea 元素：</p>
   / v) b; T/ k9 Y6 Q* F' ~
7.   <p style="white-space: pre">{{ message2 }}</p>
   2 d; F7 N# P0 k; [' e
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   
10. 
    7 c( z$ V  t  P' Q+ |! A
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    , j- A2 _% N- z9 L& o% n
17.   }
    
18. })
    
19. </script>

复制代码

复选框

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

复选框

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

- B" q8 ]; I, v

1. <div id="app">
   
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   1 t+ ^' W8 ^' L2 \- [1 w
5.    
   ! K, B3 ^8 q& ~
6.   <p>多个复选框：</p>
   + X% {& f( v, x0 b3 r+ u
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   ) ?7 Y% O' g4 `+ y0 y7 K
8.   <label for="runoob">Runoob</label>
   
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    & Z- N+ R! c. [5 Z' p: f
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
      M6 A: l3 T1 Y% U7 m* S3 d
12.   <label for="taobao">taobao</label>
    $ q2 \) z7 Z$ E' P: c- ~' X" C7 l
13.   <br>
    ' L  R& A6 n0 C
14.   <span>选择的值为: {{ checkedNames }}</span>
    & a$ s3 r7 ]+ d& B' w$ s. J- ]
15. </div>
    
16. 
    
17. <script>
    
18. new Vue({
    
19.   el: '#app',
    4 e- e; x+ O. X! w/ i7 F
20.   data: {
    
21.     checked : false,
    
22.     checkedNames: []
    
23.   }
    
24. })
    ! y; F8 C* x: g
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
     d. U/ A% a. [3 M5 C0 |# T
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   
3.   <label for="runoob">Runoob</label>
   / }# I/ Y9 i2 F+ _" s* L7 B- q2 a
4.   <br>
   5 d+ r; Q' P! \0 c" u
5.   <input type="radio" id="google" value="Google" v-model="picked">
   & P) l% O2 B6 P
6.   <label for="google">Google</label>
   ) a0 c4 I7 h( ]' H) C
7.   <br>
     R; b0 w3 {2 u  ]9 K- t9 t. }, J0 ?8 e
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
     K3 Q$ U5 I% E; k% J8 v9 z# W
10. 
    
11. <script>
    
12. new Vue({
    1 ]% @$ l# J/ V. l8 P! J
13.   el: '#app',
    
14.   data: {
      J) ]8 m! ?! N& @: W2 L0 N
15.     picked : 'Runoob'
    ; `( G6 j. d: ], S, r
16.   }
    $ g5 Y+ t0 U1 M) V' b& c
17. })
    
18. </script>

复制代码

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

select 列表

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

select
# h. Y9 s5 `* N; O

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   # \9 F/ j4 y2 }2 X
6.   </select>
   
7. 
   2 d! w( g9 i! K' F2 d$ u" x
8.   <div id="output">
   5 `1 b" j8 V: A9 C0 R0 Q
9.       选择的网站是: {{selected}}
   
10.   </div>
    " \5 U& U' g# S) T6 h4 D/ S
11. </div>
    ) O2 y4 J6 S, q4 S6 G6 I6 ~
12. 
    
13. <script>
    - `* `% {$ L4 h' @! S2 P. J5 ?9 D
14. new Vue({
    6 K7 ?4 R$ L! G, u# {
15.   el: '#app',
    
16.   data: {
    - R  V4 w3 M. M, Z1 P
17.     selected: ''
    % E0 t+ P" B+ E2 \  G
18.   }
    / f7 a2 k, K; z, u5 z
19. })
    5 ?0 P! S1 d( m) Z5 q" a2 i
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   " z7 K8 G- }5 D
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',
   & _, ~# g2 Q. H1 o
3.     data: {
     R6 D0 p  [) r3 q( e2 V6 u
4.         checked: false,
   " f# s( h7 H4 R5 M* ~4 Y
5.         checkedNames: [],
   & H9 l1 Y/ x; V& O3 @3 \8 L
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   9 \5 K$ l1 Q5 W  x7 q2 G
8.     methods: {
   
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    7 b; T2 y( ~( N# A9 V, |0 E5 ~
13.                 this.checkedNames = []
    
14.             }
    2 L1 k/ p' C+ O# J
15.         }
    
16.     },
    8 P9 C! w- n5 ?7 G3 M) s
17.     watch: {
    0 t; y! s1 I2 r4 f! ?
18.         "checkedNames": function() {
    " ?# g/ j! C8 B  z$ C* |: ?
19.             if (this.checkedNames.length == this.checkedArr.length) {
    1 @; B3 B4 y4 d5 w; m* U0 `
20.                 this.checked = true
    8 f, A6 C( n, t8 B8 j
21.             } else {
    : T) h8 N( ~6 ?/ m% J8 W
22.                 this.checked = false
    
23.             }
    
24.         }
    
25.     }
    1 Z$ |+ a  o: j3 Z4 A
26. })

复制代码

7 k7 v* _) N4 i: h4 l' M: n

+ z/ K0 Y+ Z! }  ~0 V2 Y' x
3 H6 H" o6 `& e9 k$ p! O! E/ z
- {0 A6 T& [  F" J! F1 D3 o1 s, `

9 L$ H# O# `/ _
5 L7 k" r! |: O8 p8 T# K7 O: T5 Q