cncml手绘网

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

---

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

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

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

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

输入框

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

1. <div id="app">
   1 E- X" |6 j4 M! g+ T( j2 y2 U
2.   <p>input 元素：</p>
   6 ?6 B7 c2 X) h
3.   <input v-model="message" placeholder="编辑我……">
   + I) H( V1 |- \9 d
4.   <p>消息是: {{ message }}</p>
   
5.    
   5 |' R. {3 d3 O0 a. \0 s0 |
6.   <p>textarea 元素：</p>
   
7.   <p style="white-space: pre">{{ message2 }}</p>
   # [2 |3 Z* m& v. F: W9 h% T
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   . o0 `9 F; u8 |
9. </div>
   2 e# E5 S- _! I4 I
10. 
    
11. <script>
    . [* {1 ~- r& t% U! c0 ~* a! J, T) z7 [
12. new Vue({
    
13.   el: '#app',
    " T+ _+ }* @) r  k& g5 S- \
14.   data: {
    
15.     message: 'Runoob',
    ; X$ R7 o9 G5 E" {  m
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    1 b" t6 b" q2 V$ J4 T) q: E/ z8 ]
17.   }
    
18. })
    % ]: J5 i# p. [. g; {
19. </script>

复制代码

复选框

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

复选框

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

" V* Q& a* G2 a

1. <div id="app">
   0 P& P( L' x4 Y: F) z
2.   <p>单个复选框：</p>
   
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   4 h* s# z: a) f, n
5.    
   
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   ' y5 l' v) z0 T; N7 v! v
8.   <label for="runoob">Runoob</label>
   
9.   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
   
10.   <label for="google">Google</label>
    , @( J0 s: d3 M+ w& _4 b
11.   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    
12.   <label for="taobao">taobao</label>
    2 G+ e! c) S  p
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    
17. <script>
    9 n0 s# [# \0 e
18. new Vue({
      _3 T5 v( j/ Q- l9 a; A3 U4 s
19.   el: '#app',
    + ^) L& d, [+ c$ m5 R3 \6 t! w4 Y
20.   data: {
    
21.     checked : false,
    1 v4 T' J0 ?+ C. u* \$ V
22.     checkedNames: []
    
23.   }
    
24. })
    6 ^4 ]; y6 Y1 D
25. </script>

复制代码

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

单选按钮

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

单选按钮
/ \& Z! l6 B3 g! z

1. <div id="app">
   
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>
   
7.   <br>
   ; g2 c5 C3 V0 S, G* Y4 m$ s" i
8.   <span>选中值为: {{ picked }}</span>
   . ~# V, C1 B4 P2 }( }; k
9. </div>
   7 j% B4 V) T( s+ j7 @$ S
10. 
    3 \( }: @7 K! M
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    ) w+ O; ~* w) T# x( i& @
14.   data: {
    ' u9 w1 R9 v$ K, a
15.     picked : 'Runoob'
    - g9 `; q" E/ D& w0 x( ]8 ]+ a2 L
16.   }
    
17. })
    , z1 |2 W& f6 ~! d+ d& |* Y
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   9 S7 S+ F2 j4 z* U
2.   <select v-model="selected" name="fruit">
   # f2 k8 P- J4 z* L/ H, t
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   8 s. \5 B% e& ?
5.     <option value="www.google.com">Google</option>
   1 n2 D& u  P% E( G3 J
6.   </select>
   7 U3 h$ r5 D" |. q( U8 i+ W4 G  A
7. 
   1 O: k2 G/ Q* P
8.   <div id="output">
   
9.       选择的网站是: {{selected}}
   # f* ]6 n: d+ K9 Y2 s6 J3 f! \
10.   </div>
    
11. </div>
    
12. 
    4 Z, |6 u7 M* o- j8 f$ u
13. <script>
    
14. new Vue({
    
15.   el: '#app',
    
16.   data: {
    * F1 d/ ]% r6 H0 u/ Q% r% L1 p
17.     selected: ''
    
18.   }
    
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({
   
2.     el: '#app',
   
3.     data: {
   
4.         checked: false,
   9 ^0 w0 q4 d7 i& l
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   9 ?: a# S' d% d; d+ k3 O
8.     methods: {
   5 v$ W" _7 ~3 Z' k
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    
11.                 this.checkedNames = this.checkedArr
    
12.             } else {
    
13.                 this.checkedNames = []
    1 R8 V; c: C# W* }1 X
14.             }
    
15.         }
    
16.     },
    " c5 U) G3 I" ~3 Y" f
17.     watch: {
    $ h% F9 i: d: U6 _; x
18.         "checkedNames": function() {
    
19.             if (this.checkedNames.length == this.checkedArr.length) {
    # I% K% O& x3 ~8 V( j( u
20.                 this.checked = true
    
21.             } else {
    ( ~( r/ }. k2 y6 w
22.                 this.checked = false
    , ]6 B2 t/ k* F* Z) [
23.             }
    ! R( N9 B( r  |2 s
24.         }
    / m( H% F6 t9 A, R/ a! B6 j
25.     }
    4 @7 @* n( e. ]+ m( n9 W6 N+ N$ _
26. })

复制代码

/ Q- m& Q; i$ r: D" M: ]" S

) y, {7 e8 j: i- e  O) w
1 [& c) L% m! i& Y" ?
) k% M& S9 J" ]& r3 a6 F0 y- d" s

+ n  e0 x- v  ?. H3 I

---

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

Powered by Discuz! X3.2