Vue.js 表单

admin

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

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

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

输入框

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

5 j! F7 U& ]' c  G. L8 T1 W

1. <div id="app">
   / @' M! ^4 J: S5 D
2.   <p>input 元素：</p>
   
3.   <input v-model="message" placeholder="编辑我……">
   , e% A- ^. u5 P3 F3 }/ F
4.   <p>消息是: {{ message }}</p>
   
5.    
   9 q% U9 }" s( y* W
6.   <p>textarea 元素：</p>
   + i! D. s' Y" h
7.   <p style="white-space: pre">{{ message2 }}</p>
   
8.   <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
   
9. </div>
   # R9 l$ y& j& v- a+ A. p
10. 
    
11. <script>
    
12. new Vue({
    
13.   el: '#app',
    ) D3 w% |) d4 o. w
14.   data: {
    
15.     message: 'Runoob',
    
16.     message2: '菜鸟教程\r\nhttp://www.runoob.com'
    
17.   }
    ( I. }. Z3 C. I- M$ O9 U* L, X
18. })
    ! x: P$ j, O' Z* s$ D8 x. a/ |" r2 w
19. </script>

复制代码

复选框

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

复选框

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

1. <div id="app">
   
2.   <p>单个复选框：</p>
   6 i6 w4 y! P0 C
3.   <input type="checkbox" id="checkbox" v-model="checked">
   
4.   <label for="checkbox">{{ checked }}</label>
   , P: @1 u, j0 w' d1 K# _
5.    
   
6.   <p>多个复选框：</p>
   
7.   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
   . j) p) k% Q! d! p0 n
8.   <label for="runoob">Runoob</label>
   & I' O* T* ]* j; x6 y
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">
    
12.   <label for="taobao">taobao</label>
    
13.   <br>
    
14.   <span>选择的值为: {{ checkedNames }}</span>
    
15. </div>
    
16. 
    7 F  e; W# F# E, L0 m* a: V2 U" I
17. <script>
    
18. new Vue({
    
19.   el: '#app',
    
20.   data: {
    
21.     checked : false,
    # T8 Y1 \4 H, Y6 a/ ]
22.     checkedNames: []
    ' @2 u0 k$ s. g% R
23.   }
      M' Q, ^3 M8 Y4 o5 u7 {
24. })
    . d" M5 g6 K+ V6 t2 m
25. </script>

复制代码

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

单选按钮

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

单选按钮

1. <div id="app">
   4 d# f1 t1 y& z4 e
2.   <input type="radio" id="runoob" value="Runoob" v-model="picked">
   7 B* V/ `- F1 }4 y4 h3 i
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>
   ! m7 P4 I1 _% l! j1 @
7.   <br>
   / {6 e: J7 b( \2 E0 ]# c& Z9 u
8.   <span>选中值为: {{ picked }}</span>
   4 M0 R/ Z* k, f: @& e
9. </div>
   
10. 
    - v8 n# J0 O! G
11. <script>
    , C& y& j& j) f# w* I1 N& \
12. new Vue({
    6 ^& v: o* x/ D- X5 @
13.   el: '#app',
    
14.   data: {
    ! c8 b  Z: K8 Q+ }+ T( G
15.     picked : 'Runoob'
    
16.   }
    
17. })
    ) ~" ]: @4 H4 q4 j& O2 z4 x
18. </script>

复制代码

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

select 列表

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

select

1. <div id="app">
   ( k! _% i' u' C/ ]# _" |1 ]/ E
2.   <select v-model="selected" name="fruit">
   : @- s& x+ M) K4 I) k
3.     <option value="">选择一个网站</option>
   
4.     <option value="www.runoob.com">Runoob</option>
   
5.     <option value="www.google.com">Google</option>
   
6.   </select>
     W/ F$ s4 ?7 ?) _# q: q
7. 
   ) D5 w9 y- |+ R8 f* \( J) }
8.   <div id="output">
   " V. V+ d2 h. r- P0 Q; k
9.       选择的网站是: {{selected}}
   
10.   </div>
    5 Q0 e: |9 L# y# Q, O  p6 K: w
11. </div>
    
12. 
    - Z8 o& r- I. e5 V- R1 I
13. <script>
    0 o! y2 H+ o/ i1 c! E
14. new Vue({
    
15.   el: '#app',
    
16.   data: {
    
17.     selected: ''
    : m, q4 @7 P9 b3 |
18.   }
    ; x/ |4 a  h7 e. y1 l8 b2 u$ q
19. })
    . \  X  R6 L) r" q* j7 \+ Y* Q
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({
   ( @, a3 {- }8 W! V/ w
2.     el: '#app',
   
3.     data: {
   
4.         checked: false,
   . d& {# ~) D# N7 j0 a8 ?# T- w! _' e: K
5.         checkedNames: [],
   
6.         checkedArr: ["Runoob", "Taobao", "Google"]
   
7.     },
   
8.     methods: {
   
9.         changeAllChecked: function() {
   
10.             if (this.checked) {
    8 @5 e2 M' N0 C0 A4 O8 d
11.                 this.checkedNames = this.checkedArr
    " e) c( h+ Q# `# y  O# ?
12.             } else {
      R  X( y/ {: A) t& S5 l; U: O
13.                 this.checkedNames = []
    
14.             }
    6 Z$ |% z1 d  ~5 }7 L- e) O( ^( h( f0 ?
15.         }
    
16.     },
    
17.     watch: {
    , E/ Z5 [: C5 c- I* z4 a
18.         "checkedNames": function() {
    # R1 t6 u* y1 |0 w& h- J1 C; v
19.             if (this.checkedNames.length == this.checkedArr.length) {
    ! h- k0 F, H9 E
20.                 this.checked = true
    
21.             } else {
    9 J3 A5 a, X) ]- J' k1 b, {
22.                 this.checked = false
    + r: l- [. q. V0 ~- t  H# M! e, t
23.             }
    
24.         }
    % W- |+ u. Y$ `! l  G% ~+ k( U& F
25.     }
    
26. })

复制代码

9 h& Y" u8 H1 r3 ]/ a


9 O" c7 c+ H+ X- @1 F# X; v