|
这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
* h2 T$ U6 X: k! f" e; ~- <div id="app">1 ]- I) h7 y; J
- <p>input 元素:</p>( N+ e+ h; s5 y3 I" K F
- <input v-model="message" placeholder="编辑我……">7 k' @$ _7 {! U- P. n1 P9 [
- <p>消息是: {{ message }}</p>
) g4 i4 @7 ? J1 j" u, S8 A -
! l* ?: a/ }4 ~6 ?$ r! \- L8 d6 T - <p>textarea 元素:</p> L9 h& A7 [4 \3 k1 T) M! ?9 M
- <p style="white-space: pre">{{ message2 }}</p>* M+ U: D8 ^; C3 `5 E% j4 s
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea> \/ Z; |9 F6 X
- </div>
6 R+ d: r$ j0 R, Q( \ - ! k" N' d+ z* }9 q
- <script>
4 Y8 h: D6 c0 o- Q( B - new Vue({
4 S+ j. K- k" D - el: '#app',- p6 e* ]0 k7 s' ^3 v( C0 n( s! ?
- data: {# A# a9 D; q3 _, l9 [
- message: 'Runoob',# {. S0 c( n9 D7 {' j# }. R# d
- message2: '菜鸟教程\r\nhttp://www.runoob.com'
1 t9 L; j* [! e: c: C' g - }
% M$ S: g. B2 S& Y& [/ A4 h8 r - })
. p8 j3 o- C' X, P - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
4 C) o) W3 w9 G- Z6 I# F1 k7 C4 r- <div id="app">; @5 L: L& g7 O9 n j# R
- <p>单个复选框:</p>
7 y# Y0 l+ m9 K Q( X2 ?- M. t8 A - <input type="checkbox" id="checkbox" v-model="checked">
1 e8 ?2 B$ k: h) T& t - <label for="checkbox">{{ checked }}</label>
: m! K, M2 ]4 r. \9 h -
* ^" t _. k/ [& r- h - <p>多个复选框:</p>
* @& Q1 O3 a2 Y - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
3 n% O x$ [% }2 {. r& c - <label for="runoob">Runoob</label>' e; w$ ^' j5 M' L
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">( ~* M1 v+ {% R( t( t( ?
- <label for="google">Google</label>
9 k2 y q ~+ u/ F; f" _2 o - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">3 [( a0 Q# O5 i9 ~. n
- <label for="taobao">taobao</label>& P$ i: }1 n9 V* V* w* n+ o" u
- <br>
- L6 ~& Z8 g9 c; v7 d! X/ K - <span>选择的值为: {{ checkedNames }}</span>" A5 H) C& m( D4 ~) A3 J
- </div>
2 p- @9 q) b$ Q, K4 F# f. Z: R -
/ _2 i0 O: s+ G% c - <script>
% F. v2 O6 Q2 m! M. N% n* O9 ~ - new Vue({2 M3 ^( C$ d8 D' r7 g: V
- el: '#app', q( M& `, X$ J* {: m) b7 |: K6 T
- data: {2 {, H2 F5 L" v Q8 ]$ Y3 q9 k
- checked : false,
4 p0 H; @: h2 k - checkedNames: []' D4 X' A) a/ J3 h' }
- }
3 l* N, H! j) u" a1 L - })9 N! O7 q8 Y1 E& H$ @" e) L( `7 q% W
- </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
5 w/ g' | s! F L- <div id="app">
- L& n$ Y7 p1 i. J - <input type="radio" id="runoob" value="Runoob" v-model="picked">
2 T2 ?3 v% P+ q! g- C$ c - <label for="runoob">Runoob</label>! o8 y5 w$ w1 O# Y
- <br>$ Y& D9 H+ A4 F
- <input type="radio" id="google" value="Google" v-model="picked">2 N7 s5 \$ U3 E' F& a: m5 ]
- <label for="google">Google</label>/ @1 e6 u( h, K% @2 \
- <br> h4 _& A7 o6 ?, Y) ?' Q
- <span>选中值为: {{ picked }}</span>
9 i0 G5 [5 R) a. ~- C# h - </div>
$ Z5 h9 Y: P; Y* d! Z - 5 _# |8 u! V. c+ |1 U
- <script>
! _* o# X7 i' L% J: L9 f - new Vue({' k" y: q. U+ L! K
- el: '#app',
$ S5 ?# A% `, O- @- j) W - data: {
& j/ u6 S6 `4 x - picked : 'Runoob'
( o+ U* ?) i F+ U8 T! Q - }! u2 \/ V- J2 t! q* s! Z7 u
- }); R$ @1 j6 ]* h8 ~3 h8 O5 ~
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
! h+ u1 g! {' H( W$ P$ f- <div id="app">
; j' c1 P% J( s3 w, l# N+ | - <select v-model="selected" name="fruit">- j/ \- P! {1 e
- <option value="">选择一个网站</option>. h" a" P+ B3 S B! Q
- <option value="www.runoob.com">Runoob</option>- E" i) n, M8 P/ g7 J+ m
- <option value="www.google.com">Google</option>+ q" k- {, r6 Z. p% S& r6 J
- </select>$ ]/ Y* Y) m9 \3 J# u) ]6 t: m. p
-
% H% V& c. b& x* q5 X. G - <div id="output">
4 [; g7 p! `, M1 g+ t: Q5 o( e _ - 选择的网站是: {{selected}}. {4 M( M8 i4 T& j
- </div>
7 _* P1 j: H4 z - </div>
2 I0 L8 L$ _0 Y1 k* n8 p -
8 ~* N& T4 j, ~3 |( u - <script>
9 }' h( S& |/ X4 A: W. r - new Vue({
7 o, W$ p, n: _$ b$ `1 m - el: '#app',* @% m! E4 n2 H8 S5 |. n
- data: {5 ?$ J2 @% B. ?! D# |5 }
- selected: ''
7 i& l+ p* i/ x0 y - }
- b. n# T m( }) W/ R - })
8 X! h0 X) D; T2 c! l' \3 P - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
4 a i4 B8 f9 U E% o1 t - <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({* ]- j d' z& i }# Y$ C2 F
- el: '#app',9 w, A7 S s* G8 L+ e9 L3 ^
- data: {
# v- w4 |" B2 o+ I- W; i3 S- G* n - checked: false,% f" {8 E- F+ Y1 j1 I* x- [
- checkedNames: [],
* B1 w3 a1 q9 L2 R* I6 g - checkedArr: ["Runoob", "Taobao", "Google"]
3 O8 z. k2 F& {0 o% h1 i2 ` - }," h! P. C- S4 Y2 _3 B" F
- methods: {
" l% F& s' W8 D j* p" U/ ^. l - changeAllChecked: function() {
4 V& D# h* ]9 e0 Y$ ^( r% m - if (this.checked) {" ~3 R+ Q/ D7 Y' ]5 c
- this.checkedNames = this.checkedArr
6 R' X4 ]; ]6 O: ?" `8 Y - } else {: q% c1 N; |# o" X
- this.checkedNames = []
2 T, B8 A9 P! o1 T1 p$ r2 ? - }
+ ~+ M2 Z. S0 G4 [0 ~ - }
, ?+ G5 L. z) E+ B - },2 e! a9 x5 h F3 l/ Z7 k
- watch: {
& P& U( ~2 h; A6 C - "checkedNames": function() {7 {, B, Q3 m+ z% G0 V
- if (this.checkedNames.length == this.checkedArr.length) {
8 j* Y4 k5 S! {, _) R2 s& g - this.checked = true
8 ~ A5 k4 y( @) { - } else {" C6 u1 F/ J& w+ G
- this.checked = false/ g) o# j$ d1 g$ f
- }2 A: V* v5 N4 b7 }! }- O3 d/ w
- }
$ l' {1 f, a& Z! d, F+ E* P+ c' l - }
1 C7 T% P/ ~! {1 n - })
复制代码
; a! m$ L- C+ F) @1 V1 \4 o) q6 x5 h% K! E) s
% W% v: d1 [! l' ^
8 u% Q) t1 J7 Y% [' Y( ^' X: T8 P) z. U8 a$ [5 L) ?( F" p
' W0 H0 m# i# }5 T# X% B
. L7 e& {* o# b' G& e
' d; H2 p3 O m. O' Q- F |