Vue.js 表单

admin

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

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

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

输入框

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

$ B4 [# h* ^' [  d9 n6 A

1. <div id="app">
   
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   
5.    
   - X# Y7 {' U6 R( @- ?' i; m
6.   <p>textarea 元素：</p>
   0 H- L& n# p) f$ W" A' {! I, z1 p2 ]
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   9 g" b/ i% x% d& [
10. 
    ! a: ^9 D1 j, P; F
11. <script>
    
12. new Vue({
    . Z" O2 F" ]! Q4 U5 p
13.   el: '#app',
    
14.   data: {
    ! k, l7 |+ N- U/ o) r# u; ]' V, L
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    1 r% `$ r/ \1 Y7 Z2 ]/ \, V
18. })
    / V) e; s, S  |# j! z3 [/ O
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   $ v2 _9 H" s' {* T8 y- c* y# q
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   5 t1 W8 h. ~8 x0 g& C
5.    
   ! c4 p" w4 Q+ \3 Y% a; a
6.   <p>多个复选框：</p>
   5 ~4 W9 u& {, ]! E
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   
8.   <label for="runoob">Runoob</label>
   
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>
      g4 ?+ w/ [8 }) [
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    
17. <script>
    
18. new Vue({
    ' W8 }, T8 r7 |8 @+ o# @
19.   el: '#app',
    
20.   data: {
    1 |. Q% H# r) j$ {- Z! Y
21.     checked : false,
    2 K/ f5 K; \. d* G7 {0 _
22.     checkedNames: []
    % _$ b" [8 ]1 k& @
23.   }
    
24. })
    8 w, [5 @: d. C
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   
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">
   2 j9 W1 g0 w8 X0 B* `
6.   <label for="google">Google</label>
   ; H7 H6 X" v; [+ F5 O' |
7.   <br>
   " Y- q+ t9 s0 J8 N; i; f
8.   <span>选中值为: {{ picked }}</span>
     ?8 H! R, W* [# v  }) Y/ j
9. </div>
   - j7 C( r1 G& f/ `+ b) Y
10. 
    
11. <script>
    9 _( h1 \( I( _
12. new Vue({
    , l' d2 K6 i: X( }8 M
13.   el: '#app',
    , U/ `. O, {& v; k9 |- j5 T
14.   data: {
    ! M0 E: G  n' I) Z& B
15.     picked : 'Runoob'
    
16.   }
    
17. })
    9 u  O5 \3 L6 ?) U) y
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   0 @: q9 X! ~) T! j
3.     <option value="">选择一个网站</option>
   " _3 ^# k9 k0 |, V
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   ) @+ u; p% O. y2 e
7. 
   ! v, L+ |! v+ T/ Z5 _: C
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   ! G" {9 p( G' d# t" A1 b) U
10.   </div>
    
11. </div>
    
12. 
    : a: `3 y/ q, k& A
13. <script>
    
14. new Vue({
    
15.   el: '#app',
    . ~' v3 L2 _+ [
16.   data: {
    . p9 {' e( n7 s; c
17.     selected: ''
    
18.   }
    ! y1 B+ o9 d# B0 r, B. R
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   1 M! {9 Y- D4 c1 i' e/ {
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({
   % q/ B+ u/ Y# _; \2 n/ D: I* b5 @
2.     el: '#app',
   
3.     data: {
   
4.         checked: false,
   , ~5 u3 z* Y" u+ ~0 d- |. d
5.         checkedNames: [],
   6 s! a6 u2 ^! C6 t- a
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   # ?: B3 B# N" [" B) ~0 B
7.     },
   
8.     methods: {
   
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    
13.                 this.checkedNames = []
    
14.             }
    . y3 o: @4 Q. R+ l5 k( D
15.         }
    0 `4 N: Q; |: v5 `
16.     },
    ; _" r& T6 {6 v: g4 w( T. a
17.     watch: {
    
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    . a3 C0 }6 ^& g' h5 E  U
20.                 this.checked = true
    . p- v3 p0 S* j7 d0 S- ~
21.             } else {
    - b" \7 s+ Q6 i$ t$ A% j' s& n
22.                 this.checked = false
    * e! E4 f3 A# h
23.             }
    
24.         }
      k( P" j# ]' ^0 ^. }' P: J
25.     }
    1 U, [$ }/ H6 w$ l2 P0 M- D* ~
26. })

复制代码

/ o: w) a: q, `5 f+ B
6 `1 [$ q) p  E* o; B
9 O: o1 q5 [% u5 k# A: d' |
2 e+ E* h/ |7 H9 |3 g

' O; F, Q/ I4 J2 e' O1 c+ s+ D2 ]6 _
9 B; a9 w$ T5 d& y7 g' y9 u  V. H2 R