Vue.js 表单

admin

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

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

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

输入框

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

1. <div id="app">
   
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   ; n* G: r# y, r# B
5.    
   
6.   <p>textarea 元素：</p>
   
7.   <p style="white-space: pre">{{ message2 }}</p>
     X6 S. }, e- f
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   
10. 
    2 p3 y- R  u3 B$ w) Z8 B& Q
11. <script>
    ! W( |& b6 f- E* m3 {0 `0 y
12. new Vue({
    
13.   el: '#app',
    4 F- F3 o6 O& c1 V- t
14.   data: {
    
15.     message: 'Runoob',
    1 j& U. ~0 l$ V; g' K
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    " y' f, n* o) T' l- |2 Y& ^
17.   }
    3 L# A: W! t" D; c2 c, N
18. })
    8 L3 ]8 l. K5 d3 y. S
19. </script>

复制代码

复选框

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

复选框

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

2 M: I2 x7 h" M2 @, o+ X

1. <div id="app">
   3 S5 y' A% Y  v' M- s  ~
2.   <p>单个复选框：</p>
   " `9 w( {) Q; s  F
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   
5.    
   / `: e* u: B- P, k# U
6.   <p>多个复选框：</p>
   # w( ~2 U- _: F  s! H
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   + t. t9 d* U& c/ P& ^8 r
8.   <label for="runoob">Runoob</label>
   
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   " E  H: \. i" i1 i7 `( t3 q. a
10.   <label for="google">Google</label>
    , K  r" ~$ s/ s' {, O
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    & V" d" D+ z+ K1 `, |
12.   <label for="taobao">taobao</label>
    
13.   <br>
    + U3 W* X. Q8 y0 K1 h
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    3 j' g9 p* R8 s1 I7 A# Z! C: }) y
16. 
    
17. <script>
    
18. new Vue({
    : j  Z; g+ s. z1 K6 s6 o
19.   el: '#app',
    9 h. J0 C3 z& X8 U
20.   data: {
    % I- P9 U" X9 W7 s
21.     checked : false,
    
22.     checkedNames: []
    5 y$ L: q. w' O2 g
23.   }
    $ y4 @+ R" p+ K. _3 b+ o7 z6 E
24. })
    2 c  Q, l* P4 W, U5 [' p- Y
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   / d  M* j6 [, |
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   7 m/ S$ [& i$ |
3.   <label for="runoob">Runoob</label>
   
4.   <br>
   
5.   <input type="radio" id="google" value="Google" v-model="picked">
   
6.   <label for="google">Google</label>
   
7.   <br>
   ! a% Y& _0 ?% B! @$ S8 f' c! X
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   
10. 
    
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    * L# |, S+ j" w7 U, d0 W
14.   data: {
    3 z1 A1 H6 u/ J% b1 T$ w+ Y
15.     picked : 'Runoob'
    + R- Z7 I9 n0 h8 v" E
16.   }
    
17. })
    
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   & X1 {. y# w4 I9 G$ D3 L: ~
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   
7. 
   1 j& a8 q8 b1 k
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   
10.   </div>
    
11. </div>
    8 q6 l: X: d6 r" |
12. 
    # d7 w' n5 i* k% u" ]  b, D
13. <script>
    
14. new Vue({
    4 C* x7 v) u9 F' u* I1 W/ t
15.   el: '#app',
    
16.   data: {
    2 e9 z0 m2 M. `3 E1 M
17.     selected: ''
    
18.   }
    
19. })
    # O: D% {) a& ~2 w0 x& L& T
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   ! O7 _$ b$ g# E" }+ |- K' N
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',
   % ^6 @- {7 l7 g' E; C7 f8 s% M* B
3.     data: {
   
4.         checked: false,
   
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   9 K2 N8 s( V. F( `0 @! ]5 b
7.     },
   ; h8 n6 w3 c8 Y+ k# p
8.     methods: {
   ( C. P. z' w( O1 v0 [+ Y; f
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    : m0 {* l3 l: |/ ]' P. ^+ J
11.                 this.checkedNames = this.checkedArr
    0 l! e! O0 }3 Z1 q' i
12.             } else {
    
13.                 this.checkedNames = []
    - l; d" s" [" J$ q# \
14.             }
    
15.         }
    $ T1 `4 M1 _5 h3 N: S- a+ Y
16.     },
    : ^2 u- D3 m) ~2 Q3 x7 }: I8 H) B
17.     watch: {
    4 K, h5 d" W5 W1 r  k- \/ c
18.         "checkedNames": function() {
    ; q0 j. I5 z7 A+ F, \: m
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    
21.             } else {
    9 z8 b$ C, o4 M
22.                 this.checked = false
    * ]6 v) `; P  M  X% D
23.             }
    ; R9 n) g# V8 a8 I! T4 O
24.         }
    5 E; H+ H% {# g& g. j4 Z0 z  ]1 }& ?
25.     }
    
26. })

复制代码

! Z6 z# S' r/ t9 n$ d
1 I: @4 M+ r) n  r7 e: V

- a9 ~7 g5 @7 `( l