这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: 5 ]( @3 ]* M' ]) ^# S
- <div id="app">
5 V; S4 u* }6 b - <p>input 元素:</p>
) P. |0 A' L }. \; L - <input v-model="message" placeholder="编辑我……">
+ F+ t2 e+ Y0 o - <p>消息是: {{ message }}</p>! z+ Y4 r& e6 I0 e9 p$ q! v
- # @/ T2 o% `) ?! j
- <p>textarea 元素:</p>
/ ]5 ~: s2 ]% P2 G - <p style="white-space: pre">{{ message2 }}</p>0 o: ~! @ I/ ]
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>$ {2 k+ }. r; j- ]
- </div>
# k o) \0 O i - 3 I Q$ o* V2 P2 C* p" f0 ]: x
- <script>
; k$ C0 J- |( n! r# X" m- ]! Q - new Vue({
0 e( i; M" Z; y. |1 u - el: '#app',
4 ^/ n4 U! |" u# s6 Y6 Y, w - data: {4 i+ G2 \# u* r$ R% ]9 |, {3 s
- message: 'Runoob',
6 t& U6 \$ q' Z5 {# {8 w* j) v3 ` - message2: '菜鸟教程\r\nhttp://www.runoob.com'
0 D" B! p) n( N/ u* ~' k6 j$ W - }8 q/ g* O. u4 I0 i& h; z3 T
- }) y2 j. \7 k. }4 ]* S: R- K# K. v/ w
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: 9 n6 e/ j. t! g: e
- <div id="app">- }: V& `! y3 E& `7 {
- <p>单个复选框:</p>- f2 y6 u7 M6 t+ O( H( {/ m# G+ r' c
- <input type="checkbox" id="checkbox" v-model="checked">0 p+ z8 S6 |5 b0 q# L. A: }* h$ E
- <label for="checkbox">{{ checked }}</label>
: W. A3 L$ Y$ _ -
5 Y5 r) [+ J# e4 M - <p>多个复选框:</p>
3 [* Z9 g" r1 E' `7 t6 p( F9 Y - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">& v4 o7 E4 s# f3 K
- <label for="runoob">Runoob</label>% x% T/ G8 ]- Z: @3 E
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
0 j+ U! {1 c+ M$ Q6 ^# I - <label for="google">Google</label>
. w, x( e2 q& P9 y, Z; y6 _. z - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
3 K7 h, Y2 J/ k& w1 {4 d' D% P - <label for="taobao">taobao</label>
2 Y- L3 q4 Y) x( [ - <br>% _$ l" j4 b8 K, P) n& a" X
- <span>选择的值为: {{ checkedNames }}</span>1 o V6 l) j& R9 y+ ?3 Y- n
- </div>
* M* `8 X7 Y" i - # ?7 T$ E9 P/ V- V/ C9 }# {; }+ O6 d
- <script>
- Z* j) u7 s1 |+ \, Q" k" r3 W - new Vue({) \8 J' Y# o' R% h1 [
- el: '#app',
# L7 L7 |+ L6 w, R$ [# S$ Q' w - data: {8 |2 Z2 n3 `1 ^4 c" L" J) Y
- checked : false,
' e# a3 P3 V" K! E* W' X: t& M - checkedNames: []" w1 [2 o# Q1 ?) \6 `% E# ]
- }: R1 G- k- z8 b: `' |( h+ [4 N4 W
- })
( O: t1 ]! [( H4 _* G - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮& a* T& k0 c7 c! T: M
- <div id="app">+ r4 S0 N" ?1 k! O( k
- <input type="radio" id="runoob" value="Runoob" v-model="picked">8 E3 K$ `* i, \) m& _: L1 s
- <label for="runoob">Runoob</label>1 i1 I" z O m$ M# U
- <br>
1 y+ C; M$ J& g' a/ j( | - <input type="radio" id="google" value="Google" v-model="picked">
' O& e% Z- z4 r. J5 F - <label for="google">Google</label>
4 ~' |, u/ ?- W( j6 d$ ~2 D - <br>
% i' Q$ c0 X+ h8 ?3 X! k) ?; R - <span>选中值为: {{ picked }}</span>
3 u8 C% Q A4 E2 {- `; ]1 S& O$ P; p) S - </div>+ R1 P, v; m7 F( c+ ^4 t( ^
- ' C9 O$ ^! d3 R8 z- Z
- <script>
+ W! _ g0 w& X8 r/ t) P - new Vue({( c$ \7 ~* X! A; u/ B: q( d
- el: '#app',/ `) {2 t/ _: @! d
- data: {
- {1 u) g' R. C8 [: u1 k, V - picked : 'Runoob'
$ ^; [' I( ]$ G; F" c - }% H. z- [+ W, }' m6 m1 ] N
- })
3 O( p: V) W$ v - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select( Q7 @0 ~& B9 ]. [
- <div id="app">
0 `$ a' s5 I8 _! w* e - <select v-model="selected" name="fruit">
$ r1 i5 s7 C2 T: V' a0 a( \ - <option value="">选择一个网站</option>7 g/ m" o4 i- `% r2 `8 d
- <option value="www.runoob.com">Runoob</option>- R1 C9 M, x% B+ W
- <option value="www.google.com">Google</option>! y2 Y& l' ]3 a; B6 |% W* y& Z$ ?5 L) d
- </select>
+ U! |8 P- v$ ~6 l - 4 A! y O0 O0 X, A) X* r5 X$ [7 J
- <div id="output">+ a+ _" K& _- m5 O. P
- 选择的网站是: {{selected}}
5 d2 r6 f8 j1 r" {( _2 A, J - </div>
8 V, @. `. }9 E+ G& L6 Y6 ?, o - </div>, w9 \& P* _3 Q t- L
- 1 m8 ^. `' E& E% h
- <script>% L$ C- _* s8 Y. J2 \: _" j5 i
- new Vue({
2 t- W6 \/ C# w! B: B. v - el: '#app',
+ w3 d5 s2 K) D* Q) c - data: {% Y9 ?* X9 ?7 X% X6 I7 V. N. z
- selected: '' 8 C: \; [4 Y; O( l3 D' d- S! M* P
- }' E5 Y% U* M* D! t
- }) O" m1 m# ?4 H9 Q: E" ?! [
- </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
( v+ u+ q2 H" h5 {) d8 A8 N - <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({
! N. r0 b! I. e, c2 z' _: D - el: '#app',% B" f( H0 g4 G+ b& n% d5 n7 I
- data: {0 f0 o7 h2 v8 t1 f& K
- checked: false,
. e! o# d5 \& C P/ b; F, u - checkedNames: [],
: ^* a0 K; n& V3 v1 b; b - checkedArr: ["Runoob", "Taobao", "Google"]
% g8 [2 _& j$ W! p1 f0 @* q& S) V - },
$ V/ ?8 Q. l8 Z/ N - methods: {6 x& o; z& c* R9 |4 C
- changeAllChecked: function() {
) }3 v) {6 `/ E8 X! B - if (this.checked) {/ H8 ~0 V) E. M8 {% F* j) U/ c
- this.checkedNames = this.checkedArr
! `/ q' m. @' F8 `5 m9 w - } else {5 K0 V8 J* t9 x7 G1 [0 v1 C
- this.checkedNames = []
# [" f- u% X H+ _% b0 C - }
! U% t! @& m7 T. r1 b2 F - }
& o0 v3 N4 b( q N; d% c. S - },
- \+ C0 |% z8 c8 ^, w - watch: {0 M+ v3 C# @9 S) W
- "checkedNames": function() {
% O- R, Z( \8 {0 B. ~) P7 A' q - if (this.checkedNames.length == this.checkedArr.length) {
# u3 z$ R2 G" N! i - this.checked = true, c. R7 y# a, b( W& v; c7 B
- } else {
& z( F9 s! n7 A8 `" i - this.checked = false. M# ` m4 Y' R% j
- }% x M0 }% s- l
- }8 R* H/ b j! p+ _! t0 e9 D8 G
- }
- c( {% M; [0 [+ i: @ - })
复制代码 * J$ u6 W! o0 h( N' a! F
/ K" @0 o% \0 k' O t5 ^, f0 S! E5 _: p% A& ^. o9 q
$ R6 K) ^6 L$ H6 f
0 U9 u$ Q0 s Z& O8 l1 A" |
& a7 J0 F. ~: o* ?
$ G) e" b/ ?. y: n8 c( R7 \
) v" o- ]7 s1 R- H2 v- ^9 C |