这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: & p( c# k- ]% z0 z4 p2 r
- <div id="app">) v6 g$ d) w$ z
- <p>input 元素:</p>
: k! o. Q0 U* ^/ K+ W& O0 ^ - <input v-model="message" placeholder="编辑我……">8 o& k. g- n& K
- <p>消息是: {{ message }}</p>
; h! U4 ]1 }% [6 j% X - ) J0 B( u4 K; q7 s( Q7 R
- <p>textarea 元素:</p>; Q8 Y) B( F6 d9 F6 p
- <p style="white-space: pre">{{ message2 }}</p>0 d* o$ z5 O2 x8 `
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
9 J3 J* B/ ~: C6 Y: O, c0 u% s$ E$ U - </div>& W) E3 [, h3 t2 o; T* |! U
-
3 R' Q$ N3 Y/ v- J" f6 X - <script>
p3 g% x; Y- l - new Vue({! v# [4 U- H2 e5 ]; l1 k
- el: '#app',1 w b# y# q+ m1 n/ s3 Q# [
- data: {
6 e1 _ c% v- F6 ? \6 M6 H/ @ - message: 'Runoob',
4 R0 t9 r1 ]/ o0 B - message2: '菜鸟教程\r\nhttp://www.runoob.com'
" @: }0 u. M- ~ - }
, R4 F. Y; [9 W7 V# [ - })
4 W5 F- i+ v; t - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
' w2 ^% `7 s: R: \0 t% Y- <div id="app">- j# v6 `; `) b7 l5 z# Q
- <p>单个复选框:</p>' l. e: p4 r* X
- <input type="checkbox" id="checkbox" v-model="checked">
* \# ^6 }5 w9 G( u1 | - <label for="checkbox">{{ checked }}</label>
7 q( C% i3 N2 P5 S9 u" ~ `4 E* b7 ] -
" p3 g ?& m# G3 V - <p>多个复选框:</p>( \- s8 M! Q2 }1 p$ e# |5 s- w0 C0 B
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">9 ^' U- Z) d" K3 L/ r
- <label for="runoob">Runoob</label>6 @! K- o ~5 i& l! n$ s1 R a
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
, k7 ]1 t0 R N' `9 A, w% E0 o& |. X - <label for="google">Google</label>4 ]$ u! E: V, K- i% r& X
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
5 Y! m3 E) I; G9 \" K7 b - <label for="taobao">taobao</label>
% p& N1 t2 K+ P, R* o4 g4 t - <br>
) K& j% X5 P! A0 Z - <span>选择的值为: {{ checkedNames }}</span>
' z% ]1 s: e" @% ]7 h% `! C - </div>$ F" X: F8 R( m9 s" W. ~
- 9 t$ j, m; }0 n/ i
- <script>
3 O# o: K5 b; d: W! l - new Vue({
; d @! R" d a: F' ?) s1 I - el: '#app',3 w _# Z [& V# {/ W3 u
- data: {8 D: B" o& w0 @- M. X1 s
- checked : false,% H9 C5 Q5 r2 l B
- checkedNames: []+ q7 [7 |8 B# Z, P
- }( i% {2 _; P' v* W7 j$ S; m
- })% @3 I, @5 H. W5 `2 {) B
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
* p1 v0 d# _. a8 Z- <div id="app">
$ ^' x' I* J, o) P$ ?4 p" [, {* o - <input type="radio" id="runoob" value="Runoob" v-model="picked">" ~4 z% t! V' y/ k
- <label for="runoob">Runoob</label>
* Q* q2 m5 \" I9 F - <br>
* F4 w& H8 F& E: z# s - <input type="radio" id="google" value="Google" v-model="picked">
; Z4 F" q" C# z; s - <label for="google">Google</label>! K* q) W6 ]$ q' z3 a
- <br>
1 }* G4 z+ F# U: m: j, N - <span>选中值为: {{ picked }}</span>
9 O6 k8 Y8 T& J7 G* z - </div>7 ?6 W6 n, V" _# M) ]) R( W F. p
-
9 X: l+ `, d& \9 g5 b$ d$ } - <script>7 X) @2 P5 a! M) R5 ^2 ~8 I# i. _
- new Vue({; |1 Y0 s1 x# N! O' a
- el: '#app',7 i& J) {2 D* O8 Z" k( ` g& Z/ a& a
- data: {
8 j: ~: S6 a2 n( B4 h! K( V - picked : 'Runoob'( j: z$ r" h- e
- }( X7 I6 b; m" f( r3 S) F+ m. W
- })# c; I8 u$ u C) d- T/ [' O' Y' q
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
- `* W, v( z4 x- {- <div id="app">
7 ~1 x) i0 f% u% H, y) Y( q: Y - <select v-model="selected" name="fruit">0 O3 x( I, M8 s
- <option value="">选择一个网站</option>
! r5 Q* k0 u6 w9 R+ n3 N7 }- z2 X3 ~ - <option value="www.runoob.com">Runoob</option>& Q9 K9 K. s5 { @5 D6 m5 ]1 p
- <option value="www.google.com">Google</option>
- K" m) e6 D; l - </select>
7 P7 ^+ Y% t$ i( k, q -
$ {+ C1 V$ H' F) x `- a - <div id="output">
& @# j' @6 b2 e4 k# b- D' V9 F - 选择的网站是: {{selected}}; ^$ c! J* T# _2 B, G
- </div>) r* o) V* L6 d* d5 I0 `1 v
- </div>+ e3 l* g0 i: E/ z
- $ N1 o( F5 g) u* J2 e ~* S
- <script>8 W I1 _0 C8 _$ m3 q5 L* j
- new Vue({. e( H- k1 S/ S: V' d6 E3 b
- el: '#app',
' A4 _% j! m/ ~/ l; T( ^2 _: S1 i - data: {; r Q# x3 s+ ` v8 m
- selected: ''
+ g9 ^% H x: Z! [ - }
0 o2 r# g! n3 {2 Q0 h* f5 A - })
( `# x' f7 ^6 {6 w - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
& u5 x% p/ I) A' r9 P3 k2 L - <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({
3 c- p9 K5 { d - el: '#app',
% `/ R* T. q1 j4 T( k - data: {
0 N; U) z( j4 ?9 H N" l - checked: false,
4 g$ a) @( l: _' \9 q' K - checkedNames: [],
# _# v5 }4 _4 x5 d - checkedArr: ["Runoob", "Taobao", "Google"]
0 z% X! f" {; q6 j$ Y$ E- J. b - },4 q9 |& a. P3 N# O5 _" i
- methods: {
% f- O8 B+ z" Y- U - changeAllChecked: function() {! s2 d; f0 w" i9 h0 q# I
- if (this.checked) {) Q0 g! x1 u8 \
- this.checkedNames = this.checkedArr
3 i& e% U7 i R% G. k - } else {- s9 }) i, j9 K6 @ N* T
- this.checkedNames = []& ~3 A# ?: J) n) W: W
- }
' X; j4 @0 c, Z - }
8 P; E7 _0 A( {6 | - },
; H( h" c Y9 q - watch: {
7 d/ F, W5 F" A0 ^ - "checkedNames": function() {9 H! k% m6 N& u; [: x; z( E$ E$ p, p
- if (this.checkedNames.length == this.checkedArr.length) {* M. t- H# J' @
- this.checked = true
# {$ X7 I6 I0 O# {/ \6 Q - } else {
$ G c% m4 D5 I, s$ }: D - this.checked = false
" ~" ? `2 D" G% }2 K - }7 _$ r* W) z" b- q; a
- }
: x2 r0 {+ A) k - }1 M2 `& k$ @2 a& \: ?9 m- r2 O
- })
复制代码 3 N. c" c; m/ c! C2 B' j& j9 W
( g7 y* G8 u$ `1 F/ W
: G/ {& d1 E" o7 R0 s! ^# k3 I& ?% T: F$ X2 ~9 m |. f
9 u/ l6 S5 @$ C' ~- U# I- s0 m' e( p4 M. r5 i% h$ z
; K* P8 R: [+ E* ?' t: E/ D, [7 y- s
|