Vue.js 表单

admin

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

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

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

输入框

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

1. <div id="app">
   1 I; ]7 j9 l5 ~2 p) S
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   5 p. l7 Z. w* b% j* `: P
4.   <p>消息是: {{ message }}</p>
   , q& k/ C% w# ]) F
5.    
   
6.   <p>textarea 元素：</p>
   / @$ B! L9 u  F# Z% K8 t1 ~; z
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   : M& c  N2 k) x
10. 
    0 K6 Y# r% Y9 q5 \# K
11. <script>
    ( P! ~( X0 Z$ F0 B3 E
12. new Vue({
    
13.   el: '#app',
    5 W( V" H( b4 b9 v6 i" c' M$ ]! E
14.   data: {
    
15.     message: 'Runoob',
    1 j$ o% G' U/ h3 E2 k/ A8 t* Q, a0 ~
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    
18. })
    
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
     E; Z5 \9 r0 L0 ^3 j1 H, ~
4.   <label for="checkbox">{{ checked }}</label>
   0 i2 q) @! A/ U
5.    
   2 m2 }5 ]# N2 U2 x: w7 E& Z* }+ J- H* \
6.   <p>多个复选框：</p>
   . c6 L9 ~# v) C6 ?! T
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   7 j$ `! X0 M6 l# Q0 x, q
8.   <label for="runoob">Runoob</label>
   : y: R) q/ E+ N# k- p7 |& O/ D! X
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    ; [0 Q0 n% U1 ]4 X
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    
12.   <label for="taobao">taobao</label>
    
13.   <br>
    & v( {) q1 Y9 F2 k$ y4 Y: \
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    
17. <script>
    ) }" o( U, T6 {: ?8 H" Q. ^( @6 R
18. new Vue({
    8 l7 T* ?" u7 m
19.   el: '#app',
    ! i4 s5 k7 T2 f3 n( i
20.   data: {
    1 I4 k7 ]- Z) k2 ]
21.     checked : false,
    
22.     checkedNames: []
    
23.   }
    : ^! B1 i" I9 i( U/ t% @! p. H* \
24. })
    
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   ! o1 J7 t1 Y; O/ B
3.   <label for="runoob">Runoob</label>
   , a6 o0 w% b* U- s" g% H
4.   <br>
   # J9 G. @5 a, d( K$ N9 N9 J$ C
5.   <input type="radio" id="google" value="Google" v-model="picked">
   # S+ B5 i! i8 r" s! R/ s5 |4 Z( M
6.   <label for="google">Google</label>
   ! h: l4 W& U4 c+ B- \! _! p
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   # U/ K* e4 W9 |1 {8 ]% f
10. 
    3 h: ?0 j- L  Q, t7 v# u3 E* ?5 s
11. <script>
    
12. new Vue({
    : i% |* ]/ J' B# B6 |4 S
13.   el: '#app',
    ; U6 i6 l/ W* S$ Z, U3 m
14.   data: {
    7 L: V' U  ^! B5 e6 t& g
15.     picked : 'Runoob'
    
16.   }
    4 p, N) R+ z$ `7 A  K& V; e
17. })
    
18. </script>

复制代码

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

select 列表

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

select
: Q. d( ?! M. O* b% {* {, W6 P

1. <div id="app">
   & n+ W1 u+ n4 d. n: q
2.   <select v-model="selected" name="fruit">
   / }/ r- `2 ^" O! H, s
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   ' R: S6 _. J7 E1 d' A4 Q2 ~4 `
6.   </select>
   
7. 
   
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   
10.   </div>
    + L. X' z8 C$ h5 ^' V
11. </div>
    : q8 E4 V6 |- ]2 ~3 _0 }0 _" [
12. 
    + D+ M6 u1 p8 R$ J# d
13. <script>
    3 {, C& u5 |: f# @+ J( ]
14. new Vue({
    
15.   el: '#app',
    
16.   data: {
    , y, m* c. v% @" ?& T
17.     selected: ''
    ! D- |5 ~9 s* T# S2 m( A- p
18.   }
    0 |# ^6 Y* T, W  [# N; N
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   7 ^7 |$ S) J6 x4 I, d0 q+ w
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: {
   + E3 [4 ~9 ~7 }' N  P5 z1 i
4.         checked: false,
     \9 n6 s2 L: z0 {8 C/ }! P
5.         checkedNames: [],
   ( O: h- c, S% d# {4 l7 ^
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   
8.     methods: {
   
9.         changeAllChecked: function() {
     p: \, T! C4 b, L+ j2 a
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    ) |( T' `5 Q5 q5 }( C
12.             } else {
    % f0 p, f9 p  J3 g) p% `
13.                 this.checkedNames = []
    $ e: _# u) P$ x! [
14.             }
    
15.         }
    
16.     },
    
17.     watch: {
    # `. p0 ]. K- F) u/ X+ a. o
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    
21.             } else {
    
22.                 this.checked = false
    ! c+ x% v8 Y1 ^* m$ J
23.             }
    1 f: v  R- I% |. V% f) f* y
24.         }
    : J& e- x% F; U- G1 s
25.     }
    
26. })

复制代码

2 b1 k; C& ~( r8 b/ _
6 x* E1 n5 c+ V% U
( U8 j" }& [) K$ S# h) K5 f
# ~/ v. o+ Z3 R1 x
5 U1 F3 W, o# K- A