Vue.js 表单

admin

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

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

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

输入框

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

1. <div id="app">
     Y+ [8 e) T3 `, }. B
2.   <p>input 元素：</p>
   - S2 |6 \9 l# |
3.   <input v-model="message" placeholder="编辑我……">
   9 S) v5 t7 |4 k& u/ @  T- j' a7 r
4.   <p>消息是: {{ message }}</p>
   
5.    
   ) O2 q- J6 f( u! f/ v$ v
6.   <p>textarea 元素：</p>
   % M% C7 I  ]8 D' }$ f6 f
7.   <p style="white-space: pre">{{ message2 }}</p>
   $ |$ A" d( ^% }( Q/ r
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   5 f% T$ O. s: O4 D5 `" o
9. </div>
   
10. 
    3 C- }: J0 e0 s: T0 w
11. <script>
    ' |; c* e! e  W9 a4 ^
12. new Vue({
    
13.   el: '#app',
    
14.   data: {
    
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    2 I4 z, N. n8 `: @; l, a8 ^3 m
17.   }
    $ ?( e' N- ^% z; c: {* ~
18. })
    
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   0 V4 Y0 y! ~+ B; L4 ?7 m5 V
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   6 W" G% x4 l% }. A4 Q# [
4.   <label for="checkbox">{{ checked }}</label>
   2 W7 D9 a) [: R$ r- N% b# {
5.    
   
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   ; {6 f% H9 ]! C
8.   <label for="runoob">Runoob</label>
   % \9 u3 T2 v! D  K& h
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">
    ( M1 x$ H) t  n: q  h
12.   <label for="taobao">taobao</label>
    2 @- z) w9 w7 P9 M
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    
17. <script>
    , l- h: W0 A# t- c
18. new Vue({
    
19.   el: '#app',
    9 {% V5 p2 X! p: e
20.   data: {
    , n/ Y% \4 p5 R+ z
21.     checked : false,
    
22.     checkedNames: []
    9 U! O0 N; l7 @. \
23.   }
    
24. })
    / G9 V. a  E; }$ r
25. </script>

复制代码

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

单选按钮

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

单选按钮
+ K1 V3 n0 q! [. m( \

1. <div id="app">
   
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   & w$ S* f/ p% {  {2 y
3.   <label for="runoob">Runoob</label>
   
4.   <br>
   , Q8 S2 T8 H9 R* _
5.   <input type="radio" id="google" value="Google" v-model="picked">
   % }3 e: V2 }7 m
6.   <label for="google">Google</label>
   ' T/ ]3 s6 i/ U+ T! X) M  j8 R4 k
7.   <br>
   * {9 x0 T% ?( W
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   7 [' K( ^7 `) K# \, U* g
10. 
    
11. <script>
    . d, p* |3 x9 z( _% K3 B
12. new Vue({
    " F0 u! c" p& E2 p) E* H6 [. E
13.   el: '#app',
    
14.   data: {
    5 f, K, y3 z9 T6 R4 h5 T
15.     picked : 'Runoob'
    
16.   }
    
17. })
    
18. </script>

复制代码

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

select 列表

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

select
! i+ i. b8 K; l  y

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   1 b6 @8 ]; e, k5 w: d; }+ p- C; w
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   ( j1 J# J" d% ^
6.   </select>
   - \; w& n( s' x% K% ?: T
7. 
   / Y5 K# m; w3 j/ G9 l
8.   <div id="output">
   : P) Q# T5 ]( U. a* T
9.       选择的网站是: {{selected}}
   : w4 M" V+ [& i. s* ?
10.   </div>
    
11. </div>
    8 I" k  z( `9 P& f
12. 
    
13. <script>
    
14. new Vue({
    4 W0 {. ?8 j6 V
15.   el: '#app',
    , `. e  X. f) l$ e& w0 j
16.   data: {
    6 P  ^) ?6 i2 O/ \7 H5 k
17.     selected: ''
    ) @7 F1 R! G! Y$ o2 D$ |- z& c- s
18.   }
    
19. })
    % P2 W/ A: K% D% C3 q
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   , [. A+ m3 W. J, }5 g( l" i
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({
   ! G  S, T0 t7 b
2.     el: '#app',
   . Q- A: t3 G+ u
3.     data: {
   - A; s5 a# n, ^
4.         checked: false,
   + ]: U0 s. c7 ?+ n& |/ R
5.         checkedNames: [],
   ) y, l6 ~+ N. q5 W+ K
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   
8.     methods: {
   
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    2 A3 H" N3 y4 @; H7 P  _
11.                 this.checkedNames = this.checkedArr
    4 r1 k5 l5 y' W8 @& b# m" [
12.             } else {
    0 x/ y3 d4 D; R4 g5 Y
13.                 this.checkedNames = []
    9 C2 h  T+ y0 a  Z
14.             }
    ) A0 q- u0 A3 L
15.         }
    $ M8 E3 G  H- y' j* @
16.     },
    
17.     watch: {
    
18.         "checkedNames": function() {
    ; ?! N, D' z/ P  ]5 Y; O: u
19.             if (this.checkedNames.length == this.checkedArr.length) {
    ( V) T( e; h$ x+ y" i
20.                 this.checked = true
    
21.             } else {
    
22.                 this.checked = false
    
23.             }
    
24.         }
    
25.     }
    $ O& C+ R& e" o) z3 a
26. })

复制代码

' h# o6 U. ?- ?$ ?8 t
/ O: N* j: P) Q
3 F/ B3 n% x4 L4 _' j" g



  Z3 s* u8 |, k
; }* Q' F/ G% z% p3 G