Vue.js 表单

admin

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

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

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

输入框

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

- ^+ ]% I( l* _: `/ A/ |

1. <div id="app">
   
2.   <p>input 元素：</p>
   : s' Y3 {: H4 q9 ]  k) e
3.   <input v-model="message" placeholder="编辑我……">
   
4.   <p>消息是: {{ message }}</p>
   1 e6 S4 H* d$ }* g% J# R
5.    
   
6.   <p>textarea 元素：</p>
   / T3 l% r2 k+ W+ E. ?! `( Q% {
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   " B8 @3 r7 b# U
9. </div>
   8 ~( ?4 \# ?) \
10. 
    
11. <script>
    5 U7 C- E) a& |6 K
12. new Vue({
    . `# Z2 }$ y, r$ A
13.   el: '#app',
    : u7 b* L# v/ S" F0 a- J
14.   data: {
    ! K9 B# F/ {. Y/ G2 ^
15.     message: 'Runoob',
    8 P5 q# N& \+ Q- E
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    5 \! K! T+ p; a: K! U
17.   }
    5 {  ?; U& W) ]: a
18. })
    % l3 t5 r4 U2 g& q4 {
19. </script>

复制代码

复选框

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

复选框

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

" i. D- y- Q: D$ W

1. <div id="app">
   . u; q6 T( A0 z& A, H
2.   <p>单个复选框：</p>
   " A/ X, A0 @% T9 ^* m5 i! s
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   8 K$ c* k' ^) |- W4 g, g* X) i+ B' O3 Q
5.    
   
6.   <p>多个复选框：</p>
   6 L( W" I" Y. S
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   / }' ~3 x! W6 V+ J
8.   <label for="runoob">Runoob</label>
   
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   0 U9 [4 t/ |5 V# W) B
10.   <label for="google">Google</label>
    ( A+ r' ^/ H* C" U+ T4 X3 y
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    4 F7 ^- @  u9 o. Z# u
12.   <label for="taobao">taobao</label>
    
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    + \+ O/ p$ O* r# \9 t
15. </div>
    
16. 
    7 o! ~. t- W  D' ?
17. <script>
    
18. new Vue({
    
19.   el: '#app',
    
20.   data: {
    
21.     checked : false,
    + z6 a1 _* u* o" E7 L: _: `
22.     checkedNames: []
    1 c! B2 j! V' ~( I1 V1 K, o; W' P) ~
23.   }
    
24. })
    . j/ |1 X3 W+ _! _" g3 S
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   9 [4 M2 C" N6 d9 b5 d
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   ) x, I/ f7 \: f' N& u# `
3.   <label for="runoob">Runoob</label>
   
4.   <br>
   
5.   <input type="radio" id="google" value="Google" v-model="picked">
   # G! y" R% X; G5 H
6.   <label for="google">Google</label>
   / i- e; i/ ~/ D8 m
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   4 r9 E) p& k* \3 i- F9 r$ a! L
9. </div>
   
10. 
    
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    $ X7 G6 J% F3 P& b
14.   data: {
    
15.     picked : 'Runoob'
    & k) }7 Z1 a) I
16.   }
    - m3 K- W1 ?1 q* g2 z
17. })
    " o& x* |5 @2 M% a- R/ h6 y; H
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   0 \; Y0 f, ]( v
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   1 l+ i+ p) ]. N' Y" l# t  ^
7. 
   1 \+ [. t' b3 P, l' }
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   1 I* B" D2 y1 L+ [9 _
10.   </div>
    . x+ y2 F: t* k, ~  k+ `
11. </div>
    
12. 
    # E0 k) K" E+ [' a
13. <script>
    
14. new Vue({
    # K7 @, C9 n" M" ?5 T; I( K$ L
15.   el: '#app',
    & T& @* Y7 q7 o7 a
16.   data: {
    
17.     selected: ''
    
18.   }
    # M3 g. s% o% }" a- F
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   
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({
   : P" ]8 V* h6 z- `
2.     el: '#app',
   
3.     data: {
   
4.         checked: false,
   
5.         checkedNames: [],
   * P7 |, q+ J- E7 p# X
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   # T' I  E, ~! y: U- }: q6 Y- s# J1 g
8.     methods: {
   
9.         changeAllChecked: function() {
   : z& R2 R4 H' `( d
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    6 a# c5 G2 c; s2 C  @: M
13.                 this.checkedNames = []
    % ~( J$ q5 m6 P( _8 l  F
14.             }
    ) g3 v9 P% ~* e( E
15.         }
    ) H5 G3 M0 k- G# C% w6 f) f6 k, q
16.     },
    8 U7 i# T2 i3 z' y
17.     watch: {
    7 u" w6 _- Z, Y& N0 ]
18.         "checkedNames": function() {
    5 i8 F8 j# I6 g& n1 X7 O+ z# ]) |
19.             if (this.checkedNames.length == this.checkedArr.length) {
    
20.                 this.checked = true
    
21.             } else {
    ) P  S! O! p9 z8 i$ d- _
22.                 this.checked = false
    
23.             }
    " z% }% ]" L# M" _' [, r7 q
24.         }
    
25.     }
    
26. })

复制代码

4 N. w) {1 M  L5 H( y/ w
3 a* o3 @) t0 m+ d6 t
2 G, X7 e' B7 L4 i: |* n4 D- c; h
6 K, i. `8 i* S5 l( Z( n