这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
h* R9 b9 m! T1 C- <div id="app">) x& `: W' `$ i+ ]( z
- <p>input 元素:</p>$ T; ~; ^0 f& C6 J; L, ]4 X( I
- <input v-model="message" placeholder="编辑我……">( K! o+ M* u, n' M6 x. X& j( @/ V' W" K
- <p>消息是: {{ message }}</p>
2 o( {' @4 B- F2 N4 A -
. E) \; i3 @& s! K0 R - <p>textarea 元素:</p>" N R% R6 S8 E( w% p1 E, }
- <p style="white-space: pre">{{ message2 }}</p>. t1 q' Y$ q& C9 b3 e: ?& a
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>: \3 D7 G4 L4 P5 L( f
- </div>8 ]# f& [, e6 t5 w
-
5 j2 O4 @* s7 O; n - <script>/ R# W( X* R6 b" i& C" m
- new Vue({
; U: I( W/ N2 A9 `- S - el: '#app',! w B6 A& `( }1 H& W6 P, D
- data: {
- u2 t( p' V# k6 C: g$ A" t - message: 'Runoob',, b ^0 }9 e* i: f8 o+ x
- message2: '菜鸟教程\r\nhttp://www.runoob.com'8 f+ Q) H5 W! i J( N
- }
; }- O8 w- n' u1 } - })& {! g+ a9 @; t; J* P5 _, _
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: ) r U1 u& P9 [' L3 v# I! r8 L
- <div id="app">
( H; b( N$ y7 w& D- c1 h& j9 u9 |9 o - <p>单个复选框:</p>$ A) W2 M* r* k6 F
- <input type="checkbox" id="checkbox" v-model="checked">
$ W/ i6 ]. |9 M - <label for="checkbox">{{ checked }}</label>
5 H+ n. ?6 b' V/ r& z - - Y0 }. V+ I1 X$ S2 Y" X
- <p>多个复选框:</p>% D4 J- e9 z6 ]: l8 s
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">, F; z& S5 b6 @9 ?
- <label for="runoob">Runoob</label>0 x" p# W/ ?/ V7 S4 S
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
' ^7 _3 p7 c7 N - <label for="google">Google</label>
9 S% u# b: }1 M; a$ P, {' J - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
9 h/ \& Q) @/ l4 l( q$ k: j& j4 E - <label for="taobao">taobao</label>1 f' g3 T$ N. z; K' N2 ]
- <br>
" K4 E! N- R+ _( B) o - <span>选择的值为: {{ checkedNames }}</span>
' w1 e& s- [5 W: O7 B - </div>: r( k8 Y# S4 h3 P: n* Q
-
7 A6 w, |( R1 f - <script>
& R. O& ~3 c3 I - new Vue({
9 B. h! g" l0 f; T8 O. s- { - el: '#app',1 [! p# d- p1 z+ l5 ^1 m4 t1 I
- data: {
4 u2 P2 Y# Z% ^' k" a - checked : false,
- e0 _/ ?8 o/ g6 ^& X5 N% E - checkedNames: []
; ?1 ` p+ p# b - }4 O. K" ]; T: L" X
- }), \4 f! v: E0 k& j
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
, |6 k1 M4 _; e- <div id="app">
! s% {8 {4 T! {* ?0 F: ~. M, w5 T - <input type="radio" id="runoob" value="Runoob" v-model="picked">: m" l! x1 @ ]7 _0 A" N
- <label for="runoob">Runoob</label>
1 n; K2 a: x8 D: Q/ f - <br>9 F$ L2 u# ^6 f- F
- <input type="radio" id="google" value="Google" v-model="picked">
" L3 n1 L0 o4 R$ e' `5 f2 u - <label for="google">Google</label>" I. j2 }5 ?. e+ N) s6 L
- <br>% R# f: c8 f* G
- <span>选中值为: {{ picked }}</span>
6 O3 |3 {2 p* y$ d J6 @ V: l - </div>
! W' h1 m ]- n1 G - # G* K5 R) e8 i* i1 |9 ?, s6 G
- <script>
2 q" T" z ~3 r; S5 ] - new Vue({
6 A( M. {+ |9 R: J4 e5 o - el: '#app',1 u6 J/ p# T, g+ h. G9 A
- data: {
! d) ?( t# A2 R$ @% i - picked : 'Runoob'
( N, B" n2 O8 y* m$ k* y. o9 b - }
: }) N$ C1 B C$ ~- w: O - })
1 B' \5 N; S4 A. A - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
2 K) @ U- G4 A' Q4 [' J! {- <div id="app">- S' ?8 v5 E* L' m( U. H
- <select v-model="selected" name="fruit">9 S$ f9 \8 S; X% s- g8 v3 @% s
- <option value="">选择一个网站</option>( @6 J' b! N4 f3 G- A; `0 c/ z
- <option value="www.runoob.com">Runoob</option>5 O$ s. O, {$ L
- <option value="www.google.com">Google</option>
1 {3 `- \9 E! I# M7 | - </select>" w! m( N, O4 b$ [! c& R
- ; M# r6 ^3 W' S2 b
- <div id="output">. h3 _ l4 @8 T) h. Q1 e& Z& _
- 选择的网站是: {{selected}}4 D0 F# \0 y% F; E" b
- </div>
5 T1 _* o4 m! G2 H3 ~ - </div>% S' f7 q' f( d9 z3 Z
-
, T8 \/ ~+ x6 S. u: ?/ Z' B4 f - <script>
! H8 `8 Q3 A( a5 }& F% [# t0 X - new Vue({
9 q l; J1 u8 X. G& u* w9 y. q - el: '#app',7 r _( f( f- g+ _6 c) A/ ?
- data: {7 o% J/ v; P' Z1 w" m9 a8 i5 ]0 j1 u
- selected: ''
) z( h7 t, \8 ?2 t* E - }
$ R9 ^5 X) U9 p" y - })# t( W- Z& L3 p) `
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
, u8 A7 l$ W/ w - <input v-model.lazy="msg" >
复制代码 .number如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值: - <input v-model.number="age" type="number">
复制代码这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入: - <input v-model.trim="msg">
复制代码全选与取消全选 - new Vue({
& l T- l9 d$ `3 p6 L6 H% X% o - el: '#app',
4 w& s* u i' A1 p - data: {
% V+ l; J/ N3 J - checked: false,- I: E# [5 I" {- C, N) A0 q
- checkedNames: [],& O0 k& F! |$ m0 G
- checkedArr: ["Runoob", "Taobao", "Google"]
! _1 j7 A4 t) ^, X0 |' \ - },2 T# Y5 k' X6 u, H1 T
- methods: {
, k0 g" d; j0 ?5 B - changeAllChecked: function() {
* ~9 {* d( z+ @/ Z- o5 w - if (this.checked) {' m( P3 }' ?# D
- this.checkedNames = this.checkedArr
* r# ~! y* `6 e- } - } else {
# t0 D2 B9 e; n( U: ]* Z - this.checkedNames = []
+ i0 j# u$ Z. h9 ~5 d1 b. h; ` - }
" V% n, Y; l4 F - }7 \7 ]4 G6 T5 J8 z
- }, }! f0 r6 a$ k7 k1 V
- watch: {
3 R2 L" Q) q' d2 z3 X) O5 @ - "checkedNames": function() {* X4 w: K! b# h8 k0 I. @+ |
- if (this.checkedNames.length == this.checkedArr.length) {
( J9 \- D9 I0 U' k; l - this.checked = true
8 Y/ l2 j/ G6 B, }6 n - } else {
9 x9 a5 s; b3 V/ B( P8 g+ F - this.checked = false
" x) d; D+ N- h - }$ s/ k; i4 G! \( x. W" b
- }
- J/ B4 S' {2 w. ?. O' J - }
5 O$ M7 p# o. w# G* ? Z0 ? - })
复制代码 $ F5 \ ?# g* L7 W6 f5 W8 {
: Q9 o3 @) p2 h% H! y6 [2 v% ^* V; X
6 [0 z7 O. T: j3 M
0 K! f; P1 m Q |' c$ |" k5 Q- b1 D8 n5 _0 r, R
+ R) @% H# t( m6 [
6 L" }. F A9 ^/ R7 w
|