这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: ( e7 R& X6 K3 d& H& |
- <div id="app">
, ]3 j9 ]; L) w% W4 { - <p>input 元素:</p>
- ~0 { g8 d1 r9 A9 w" M, b - <input v-model="message" placeholder="编辑我……">' X6 K$ u3 p# R+ A. s5 J6 C
- <p>消息是: {{ message }}</p>+ n) R7 v# w) N, W
- ( N9 b& o T' i$ X2 R# ?2 _$ ~* A
- <p>textarea 元素:</p>% j O7 I+ X0 |
- <p style="white-space: pre">{{ message2 }}</p>; c& l8 N/ }3 Z' P- E1 T) ]+ [
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
& X5 }9 R/ \) j - </div>; I V D4 W' P" |8 k( r
- $ u9 M& C1 Q+ w5 [% c
- <script>) o5 W) b( D7 k3 O' t1 K
- new Vue({
V# z2 x2 |/ z" E* [% S2 r& o2 | - el: '#app',, N z$ l! ^3 I( A' v; h
- data: {
9 g/ {; j6 z( I7 B4 q& B - message: 'Runoob',5 {+ ?) E: H2 F0 e
- message2: '菜鸟教程\r\nhttp://www.runoob.com'& k6 \7 D- `) ^! W4 E$ n
- }
! V, Z2 K! L6 @ - })6 r+ j: c6 Q0 N1 |* K$ L8 j
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: ( z+ X! U' t: {1 x' g2 V
- <div id="app">2 f1 I: E# @' U- ?/ t: |/ t
- <p>单个复选框:</p>* A# m( m! q! Y! ~# W; \& O
- <input type="checkbox" id="checkbox" v-model="checked">7 z3 U# @9 k+ r( f2 b7 M q
- <label for="checkbox">{{ checked }}</label>! s7 K0 k6 ]% _8 D4 z) e
- 0 o B9 O8 p+ K; d1 y
- <p>多个复选框:</p>
+ c# L8 _5 E" J% h$ V: u2 E- Y- _$ O - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">6 r: L/ O# `+ ?, c8 T$ u
- <label for="runoob">Runoob</label>
1 g7 ]' L: L# b! v2 w - <input type="checkbox" id="google" value="Google" v-model="checkedNames">
$ X* U5 A, f6 M9 e f0 z' [ - <label for="google">Google</label>( }4 {. b: f* C4 s. S% z
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">: p6 w2 v8 o: l5 v; h& a
- <label for="taobao">taobao</label>
: W2 O' w+ J0 S" D- `8 d - <br>
4 L( W( }2 j8 `3 w* Q - <span>选择的值为: {{ checkedNames }}</span>
@ S+ |9 H8 V2 r - </div>& \% E5 T. p% w n* u
-
* C* I& X1 A1 Y2 v ?# t y - <script>/ L* Y# L! C* Z: V
- new Vue({9 B$ U! I2 F; Y& V! v
- el: '#app',
. j" P+ R5 a1 k$ p7 e - data: {
4 ]" j O* S/ |! e/ J2 I( G0 Y: ^ - checked : false,
/ j# f [- y! b4 Z4 Q# } - checkedNames: []
, J) H, n& `( e+ J - }4 I2 h% _0 y, m* J8 E( l
- })( u6 x" q6 E; ?& P
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
8 u3 `. R0 G m- P- <div id="app">: u. t9 z7 M) w
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
# e5 s( _2 L$ L, { - <label for="runoob">Runoob</label>+ h3 c+ e& P, a; V* j2 V1 v. w# q( p
- <br>
: F8 j6 ~! A' s3 j7 g) ^# Q G1 B - <input type="radio" id="google" value="Google" v-model="picked">) M0 N( i$ D# o; Q1 v
- <label for="google">Google</label>) X3 C7 `3 S0 T) N- @5 \
- <br>5 c# p/ ?: s7 G
- <span>选中值为: {{ picked }}</span>
% ^1 \* u* f3 {3 L. S- k - </div>) C7 K4 c( R8 A3 ?
- 5 Z+ ^9 k8 F& V, s$ p0 u6 d
- <script>
+ r+ J3 U" U' m - new Vue({
: K# ~! `$ C/ V' c+ |5 z; f, Q7 S - el: '#app',
0 [' ~7 I+ k% {6 \0 s - data: {( ~3 j z' b$ b$ G3 H* ]/ _5 d
- picked : 'Runoob'
/ \6 z: p e/ j0 j. { - }
! b+ v; {6 E- x/ z+ f$ \) f - })
( @9 g* g' f( v7 E1 b - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select, W# L, T& S, a( O2 \
- <div id="app">
( j3 g1 R8 F0 f: \) r6 ~ - <select v-model="selected" name="fruit">
4 p$ `* G) r) \ ~: g - <option value="">选择一个网站</option>
0 p b) }+ ~' e v6 F - <option value="www.runoob.com">Runoob</option>
0 M% y6 W. T* l2 A2 I# N% d - <option value="www.google.com">Google</option>
- U0 Y. G% y% c; B - </select>
- ]7 g5 {9 d2 a X! t: z - ! o } S/ q8 ^, P% ]% V0 P+ D
- <div id="output">+ b" c$ D& H3 H3 ~1 ^( z
- 选择的网站是: {{selected}}
6 U2 `! b4 [, @( a } - </div>
( v0 S. A8 B- C4 j2 ~2 @7 n/ i - </div>
t) K2 B/ Y B# Z# @' @% V# x -
, F: P1 t Y( Y0 { - <script>
& x/ o1 _$ ]5 s - new Vue({: y2 U5 {& p/ {. h1 I
- el: '#app',' z# J3 h; y& ~4 }) i- f
- data: {, Y+ ]) W7 N1 b9 g" k+ a0 L( T- h; ?
- selected: '' & _* E2 t; H; N* d0 l) d
- }
4 ?2 P }: P2 C& K# D$ T - })$ M2 g. n3 A3 h3 B
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
: U1 W$ W$ h( I% C8 Z7 S& a1 {! ? - <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({
4 U! u4 z. ~8 Y- e6 W - el: '#app',: N5 j. S0 ]. y
- data: {
! _, L, m4 [' s - checked: false,2 p+ l. I4 ]$ i2 c3 u0 ^# m' Z0 ?
- checkedNames: [],
! y) h z! k. \6 [& d - checkedArr: ["Runoob", "Taobao", "Google"]$ T2 [$ J6 G2 C' S/ B- c' z+ X
- },1 B2 {! A8 c( ? c
- methods: {( t9 v! D. S8 Y4 V" Q( D
- changeAllChecked: function() {) Q- r- ], y1 |) e+ |3 e& {
- if (this.checked) {
8 g0 G# X' D* G- o1 r: M4 L - this.checkedNames = this.checkedArr
3 N6 J' e% @6 B* S `; [# N: c - } else {" y. C- W. I1 d* ~$ Y( N' L4 z
- this.checkedNames = []
" l$ C* R5 l1 l* G$ F4 ` - }
, x; ?5 \, E* R7 n - }
" X; L3 Z0 ^8 w8 Q - },4 x8 u ]; ~# }: Z& y& Z
- watch: {
1 p2 s9 m" n0 A8 _+ k+ A' f& p - "checkedNames": function() {9 X; N+ G# v+ n* s- J
- if (this.checkedNames.length == this.checkedArr.length) {
" q' E0 ^5 d/ I5 D& ~5 t - this.checked = true; o+ G( {' v0 Z" P* C
- } else {
9 ~$ r# s) _; u - this.checked = false
, \6 L. L+ b* w8 `( M: N3 } - }0 F! b6 u/ ?( @, G% H4 C# N) I3 m6 ~
- }3 C" h# l7 P4 h: N. H* `
- }
& m4 d5 b0 g) e - })
复制代码
( c: c- [" Q1 o0 O4 | |& d& X1 q, B: K) O5 B3 D% J- l2 d
+ f$ F4 }/ M* Y. a# y: a
: U) ?9 w6 R1 u A
* o9 o, W. P+ T" \0 m3 ]( v1 G, s# i: W. N0 ^4 `
1 d! P p8 f* p k8 Q9 Y' r0 w1 ?: G+ r* o( `) j' f0 C
|