Vue.js 表单

admin

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

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

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

输入框

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

9 `( I/ ^- [: n8 M7 H, n+ O

1. <div id="app">
   
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   0 c% Q8 _) U0 {1 q# t
4.   <p>消息是: {{ message }}</p>
   ; D0 z  U3 n; H+ t
5.    
   
6.   <p>textarea 元素：</p>
   3 t4 m7 {$ y0 h
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   1 u! Q: v, |; K6 M
10. 
    
11. <script>
    
12. new Vue({
    0 V' S. r8 n8 m' s3 g8 a
13.   el: '#app',
    
14.   data: {
    
15.     message: 'Runoob',
    / I# E; v9 ]* n( D9 B" k& m/ F2 ?
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    
18. })
    3 R8 {" U$ u+ Z* l( x4 i7 w2 Y2 |# x
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   6 }: l6 x3 O$ Z0 V: x2 W
2.   <p>单个复选框：</p>
   3 q; ~( z  _' p' _; F
3.   <input type="checkbox" id="checkbox" v-model="checked">
   / _/ o0 \: D. ^: _' h+ m
4.   <label for="checkbox">{{ checked }}</label>
   
5.    
   
6.   <p>多个复选框：</p>
   2 x+ d0 E; w, s: l1 G9 j% G
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>
    . m# C2 E! M9 T" F
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    : j: P: |+ r9 b' M! \3 b. T. k
12.   <label for="taobao">taobao</label>
    
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    ! N9 U) w8 [  q& R
15. </div>
    
16. 
    % X& g- u$ M" N) ^8 U  K: f+ C
17. <script>
    
18. new Vue({
    
19.   el: '#app',
    0 X- [- P9 y4 A' P  A! L
20.   data: {
    ! x8 a# {) t1 U, Q/ y2 _5 z/ f
21.     checked : false,
    ' n' z6 l' I& ~4 J# v
22.     checkedNames: []
    ( [$ b$ ]% ?6 ^8 m; S6 d* ?+ m
23.   }
    " F% i- |! ~6 T+ e1 P
24. })
    - x) j. i5 i9 _7 p" i$ X) F
25. </script>

复制代码

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

单选按钮

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

单选按钮
; i; R& u2 v2 ?# Y# H- J! f% M

1. <div id="app">
   . T; Z( X: N; o( e
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">
   
6.   <label for="google">Google</label>
   1 U$ y1 G* K1 T" |" B
7.   <br>
   1 x7 b+ e1 ?+ M: ]' @; S! [* t- N
8.   <span>选中值为: {{ picked }}</span>
   
9. </div>
   
10. 
    
11. <script>
    7 C; i3 _3 i' k% K" v1 @! N
12. new Vue({
    : E' P( j1 z# p
13.   el: '#app',
    
14.   data: {
    0 ]( j7 m6 \/ ~6 x. w- x, K
15.     picked : 'Runoob'
    
16.   }
    : ]) m) j. G) W$ I7 T% X
17. })
    & k6 X2 o/ c- E8 w% @4 Q9 w
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   $ A7 x' \% _& F' T( P8 K
5.     <option value="www.google.com">Google</option>
   9 u) F* ]' B  t. H4 Q9 U' f
6.   </select>
   ! v+ a& ]. u4 ^4 H
7. 
   6 X) s& ]1 o( z# v+ ~" u* W5 ^' }
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   
10.   </div>
    
11. </div>
    % i: b8 `% Z+ Z, @( g" O0 x  U% D: A
12. 
    * e% s: V) V- p
13. <script>
    
14. new Vue({
    * q+ H1 |- M6 L
15.   el: '#app',
    - Q1 p+ k, ]4 u7 _
16.   data: {
    " A% p5 b2 x, r" u5 j
17.     selected: ''
    5 U) u& Z0 S7 t" m
18.   }
    
19. })
    4 J) B3 I5 ?' ~1 _- g
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   * T  h. I* y: S* Y. `* w# k+ h# ~: D
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',
   7 |8 `: w! j, A4 ?
3.     data: {
   9 H2 [- L7 o- T
4.         checked: false,
   
5.         checkedNames: [],
   0 |) E. g/ y, V9 c" D
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   ) \* \6 o" F$ t8 }( j" V0 W
7.     },
   
8.     methods: {
   0 \  \0 s7 u0 T- ?* |
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    % T  |, D, |& d8 @0 |7 @. F2 S3 D' K
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    
13.                 this.checkedNames = []
    
14.             }
    ; j$ X( L9 c( h
15.         }
    
16.     },
    
17.     watch: {
    
18.         "checkedNames": function() {
    / f* j6 g, \4 p7 l6 e% q
19.             if (this.checkedNames.length == this.checkedArr.length) {
      b/ `! u0 b2 l' b
20.                 this.checked = true
    * Q* L+ E8 v0 N, K* A8 t
21.             } else {
    / |# K' T  y0 W% C" c
22.                 this.checked = false
    ( j7 x& [& o- \* j
23.             }
    5 G+ x, e, g7 @+ X2 m
24.         }
    ' v& Y/ q/ l  o6 {4 H( u
25.     }
    9 b# _, q8 d: \
26. })

复制代码

: f6 F$ Z. ~; _! h$ h( Q2 [. z






/ E& i# ^) M4 O/ Y) f$ d# u+ A7 C