cncml手绘网

标题: Vue.js 表单 [打印本页]

---

作者: admin    时间: 2018-7-4 11:22
标题: Vue.js 表单

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

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

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

输入框

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

5 g. A4 f  G% ^, a3 _2 }. N& S

1. <div id="app">
   
2.   <p>input 元素：</p>
   4 r# f  l/ u! k
3.   <input v-model="message" placeholder="编辑我……">
   $ C$ y' [5 x% f, B6 a' j
4.   <p>消息是: {{ message }}</p>
   ) Y% c+ @4 ^$ M& N1 x- V
5.    
   
6.   <p>textarea 元素：</p>
   ' S1 H4 @( R8 k: V" e& v7 }6 C8 ?! _3 i
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   / B- [: J1 U! l3 Y' A
9. </div>
   + N; W3 j% s7 k" J8 Y4 d
10. 
    
11. <script>
    ( @- a  Q5 `* G9 u2 y( N
12. new Vue({
    $ ]( O. G  Z+ r1 V! I
13.   el: '#app',
    ! v2 s- P% b  O9 B  o0 r* o
14.   data: {
    
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    * x' }' v+ T0 u1 ~) m, z1 v( x
17.   }
    
18. })
    5 j$ U6 A/ _8 x- |& z. ^7 [2 Q& S
19. </script>

复制代码

复选框

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

复选框

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

8 B# O% o* o/ j' q& w

1. <div id="app">
   # v/ m5 n1 B, |; v/ @5 H; ]
2.   <p>单个复选框：</p>
   6 n. y+ I: @: h; ^
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   ! F9 h' F' E" P1 _9 Y6 B+ J
5.    
   # _* e; Q- W6 [& t4 s
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   . B6 n/ k( h/ N& E8 ?8 K; Y8 J+ O$ n
8.   <label for="runoob">Runoob</label>
   
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   4 T' O5 l4 b  V  p* p
10.   <label for="google">Google</label>
    1 ~. A+ \& m; k$ E& g1 K
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    
12.   <label for="taobao">taobao</label>
    
13.   <br>
    3 P6 y' F5 Z& N3 U
14.   <span>选择的值为: {{ checkedNames }}</span>
    2 v* b2 ]& |* M# F8 s8 N( Y; ~
15. </div>
    ! v" M3 _* S/ Y" H2 V4 ^  p. s
16. 
    
17. <script>
    $ M' |% h0 M, [- F# P/ g
18. new Vue({
    ) I# ?) W1 }" v1 x
19.   el: '#app',
    
20.   data: {
    
21.     checked : false,
    ! Z- O& k0 J7 e9 o
22.     checkedNames: []
    
23.   }
    ; a1 [) w% w6 I& S1 Y
24. })
    
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   - \% a' ~0 s2 P+ S( V3 F
3.   <label for="runoob">Runoob</label>
   
4.   <br>
   ) r8 {/ f; D2 l7 E' l; C
5.   <input type="radio" id="google" value="Google" v-model="picked">
   
6.   <label for="google">Google</label>
   ; Y" ]. L% \/ m; b+ b' `
7.   <br>
   
8.   <span>选中值为: {{ picked }}</span>
   ( D0 S+ c6 Y* E( B/ x
9. </div>
   * W. z. y2 U, W# k8 _9 y$ i5 N
10. 
    
11. <script>
    " g) ]" y2 s7 L5 Z: C; {/ B
12. new Vue({
    
13.   el: '#app',
      f& X0 H  j$ \: C* l' z
14.   data: {
    
15.     picked : 'Runoob'
    
16.   }
    % N7 p& f1 ~. w
17. })
    6 x- |3 R! D- i: B
18. </script>

复制代码

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

select 列表

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

select
3 _* S8 d9 r0 I$ ?4 f# b* f

1. <div id="app">
   
2.   <select v-model="selected" name="fruit">
   
3.     <option value="">选择一个网站</option>
   + Q3 O( q2 d* }( W+ g
4.     <option value="www.runoob.com">Runoob</option>
   0 ?; e2 n- }7 e5 ?! T
5.     <option value="www.google.com">Google</option>
   
6.   </select>
   % h. X6 g( K2 M7 a/ Y0 `
7. 
   9 m" F# \$ c  O) |- |
8.   <div id="output">
   0 T5 Z6 W( D8 H$ |" e
9.       选择的网站是: {{selected}}
   
10.   </div>
    
11. </div>
    , P  E+ V8 q) C. i3 B
12. 
    
13. <script>
    $ b: y/ v( U' m  `+ G4 U; Q- ?
14. new Vue({
    . L  }7 K% ~" V4 G! v9 t
15.   el: '#app',
    , U( z- P5 N: N2 `! S( Q
16.   data: {
    " |3 m# E, {) k" `) [$ U, ?- T! K
17.     selected: ''
    
18.   }
    ; z3 n5 z+ ?' i7 w* d" @, g
19. })
    
20. </script>

复制代码

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

修饰符.lazy

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

1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
   : D' [6 \0 J6 Q+ m
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: {
   , Q1 x, g, Q4 `+ H( @: f
4.         checked: false,
   
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   # }7 M/ |; h9 t
8.     methods: {
   
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    9 t+ B1 U1 e2 T9 @- c7 ~
12.             } else {
    
13.                 this.checkedNames = []
    
14.             }
    7 v, `* o* ~; j0 U. y
15.         }
    , q1 i8 F7 Z  B! S: X
16.     },
    % B5 }2 e3 w# a. p' ]( `+ U) r
17.     watch: {
    
18.         "checkedNames": function() {
    . W) ?: W! A6 N
19.             if (this.checkedNames.length == this.checkedArr.length) {
    : r' W0 T% a' Q1 Z0 s$ i$ l
20.                 this.checked = true
    , K  |3 y6 T5 f' V
21.             } else {
    1 S8 W7 h0 z+ U2 q6 P* |
22.                 this.checked = false
    
23.             }
    ! |" f7 {* \0 Z8 A
24.         }
    
25.     }
    , g" f- J/ }6 D1 g8 [
26. })

复制代码

- M' F& \: r! q) l

4 W3 u1 C1 {& O3 ]  Q5 t



7 a# `* |9 T; H6 X5 W+ q: c) R
1 A! s  l& {3 @/ Q, ?& B

---

欢迎光临 cncml手绘网 (http://bbs.cncml.com/)

Powered by Discuz! X3.2