|
这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: 3 Z9 I2 X: H, Z, r( R% ?: S
- <div id="app">/ b; e4 g3 I( u/ h& j( ~
- <p>input 元素:</p>* y4 W: \ f0 f' V6 Z+ t
- <input v-model="message" placeholder="编辑我……">, M& u6 x7 D/ D( e8 E; o) \( M3 i
- <p>消息是: {{ message }}</p>
; n* G: r# y, r# B - # n o3 g3 B8 ]- l2 H0 r1 g& }
- <p>textarea 元素:</p>% [ Q) N& A" U d
- <p style="white-space: pre">{{ message2 }}</p>
X6 S. }, e- f - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>* e. W% a. L( ~% d$ O$ a. o
- </div> U8 c8 h+ r' R3 E. W' M# r7 I
-
2 p3 y- R u3 B$ w) Z8 B& Q - <script>
! W( |& b6 f- E* m3 {0 `0 y - new Vue({$ u+ ^3 J6 J3 L+ f( Z* e, {$ Y0 V
- el: '#app',
4 F- F3 o6 O& c1 V- t - data: {1 N* a! L3 |1 y" \
- message: 'Runoob',
1 j& U. ~0 l$ V; g' K - message2: '菜鸟教程\r\nhttp://www.runoob.com'
" y' f, n* o) T' l- |2 Y& ^ - }
3 L# A: W! t" D; c2 c, N - })
8 L3 ]8 l. K5 d3 y. S - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
2 M: I2 x7 h" M2 @, o+ X- <div id="app">
3 S5 y' A% Y v' M- s ~ - <p>单个复选框:</p>
" `9 w( {) Q; s F - <input type="checkbox" id="checkbox" v-model="checked">& G0 ^( u) j$ y: t+ R+ y" _
- <label for="checkbox">{{ checked }}</label>7 \) x7 W& I9 f" ]* o$ o- T) J
-
/ `: e* u: B- P, k# U - <p>多个复选框:</p>
# w( ~2 U- _: F s! H - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
+ t. t9 d* U& c/ P& ^8 r - <label for="runoob">Runoob</label>/ ^- x# K" _: t
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
" E H: \. i" i1 i7 `( t3 q. a - <label for="google">Google</label>
, K r" ~$ s/ s' {, O - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
& V" d" D+ z+ K1 `, | - <label for="taobao">taobao</label>; o4 @; K# |- f8 A0 U
- <br>
+ U3 W* X. Q8 y0 K1 h - <span>选择的值为: {{ checkedNames }}</span>* G' v; b" e5 Q7 z9 \: g4 b2 l2 [
- </div>
3 j' g9 p* R8 s1 I7 A# Z! C: }) y - 6 d6 s z3 ^) p( J, B" D
- <script>$ L3 R; Y8 H5 ?
- new Vue({
: j Z; g+ s. z1 K6 s6 o - el: '#app',
9 h. J0 C3 z& X8 U - data: {
% I- P9 U" X9 W7 s - checked : false, H$ V4 X R' p" I) }' g
- checkedNames: []
5 y$ L: q. w' O2 g - }
$ y4 @+ R" p+ K. _3 b+ o7 z6 E - })
2 c Q, l* P4 W, U5 [' p- Y - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮; d6 W, q2 r- |& \/ L
- <div id="app">
/ d M* j6 [, | - <input type="radio" id="runoob" value="Runoob" v-model="picked">
7 m/ S$ [& i$ | - <label for="runoob">Runoob</label>4 a9 x/ f6 J0 x
- <br>+ A3 o' z1 \0 I' c: O# h0 Z
- <input type="radio" id="google" value="Google" v-model="picked">0 A$ `3 u: i( U n
- <label for="google">Google</label>! p1 a0 }! U/ L, U0 m1 M
- <br>
! a% Y& _0 ?% B! @$ S8 f' c! X - <span>选中值为: {{ picked }}</span>9 D [* v0 |' }4 {* m7 R# O2 e
- </div>! ~$ J4 v$ ^$ {7 a' k4 N2 I
- ( R. n" n9 o; Y6 M/ A
- <script>8 z5 e7 I& m9 s, C' b& V, r$ P
- new Vue({7 r" r1 d# Q. ?$ W) f8 Z9 u
- el: '#app',
* L# |, S+ j" w7 U, d0 W - data: {
3 z1 A1 H6 u/ J% b1 T$ w+ Y - picked : 'Runoob'
+ R- Z7 I9 n0 h8 v" E - }8 x# s6 k: l- Z+ y+ [1 x' ]
- })% U+ X1 g3 j. a6 _- f
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select; P0 w) w4 w' S2 b5 B+ U2 B
- <div id="app">6 H; R. u0 E4 Y+ I( \$ a
- <select v-model="selected" name="fruit">
& X1 {. y# w4 I9 G$ D3 L: ~ - <option value="">选择一个网站</option>- Q$ l+ N- M5 @8 H, C4 b
- <option value="www.runoob.com">Runoob</option>7 M& U% J7 S) m- I- {4 z
- <option value="www.google.com">Google</option>! D% ^0 r/ O$ o3 z9 c: [
- </select>5 E4 D8 O( ]8 {: e: V% P3 ?/ _! `
-
1 j& a8 q8 b1 k - <div id="output">8 j7 x ]7 i/ o
- 选择的网站是: {{selected}}* l1 S* \) Y* u7 ?5 ?7 }! r' _
- </div>4 Z. o( n; e& g( h; R
- </div>
8 q6 l: X: d6 r" | -
# d7 w' n5 i* k% u" ] b, D - <script># F0 s5 K6 ]6 ~, z3 P
- new Vue({
4 C* x7 v) u9 F' u* I1 W/ t - el: '#app',, `/ ?( x) |5 p4 G; U
- data: {
2 e9 z0 m2 M. `3 E1 M - selected: '' $ d* ]6 p8 }% k% `% M
- }5 X, N( `) W4 f5 E% K
- })
# O: D% {) a& ~2 w0 x& L& T - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
! O7 _$ b$ g# E" }+ |- K' 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({2 k0 Q! W" _4 E
- el: '#app',
% ^6 @- {7 l7 g' E; C7 f8 s% M* B - data: {* t1 n, p( j( V3 }) S
- checked: false,; N; Y" R& Z$ p- [+ p
- checkedNames: [],3 |9 j$ B" k+ u" C
- checkedArr: ["Runoob", "Taobao", "Google"]
9 K2 N8 s( V. F( `0 @! ]5 b - },
; h8 n6 w3 c8 Y+ k# p - methods: {
( C. P. z' w( O1 v0 [+ Y; f - changeAllChecked: function() {9 R7 T6 ^6 c5 q" k6 z* R4 w' B4 L
- if (this.checked) {
: m0 {* l3 l: |/ ]' P. ^+ J - this.checkedNames = this.checkedArr
0 l! e! O0 }3 Z1 q' i - } else { G4 h8 q) X: p5 S% a: a
- this.checkedNames = []
- l; d" s" [" J$ q# \ - }3 E2 p. |9 {. n3 f8 p- u
- }
$ T1 `4 M1 _5 h3 N: S- a+ Y - },
: ^2 u- D3 m) ~2 Q3 x7 }: I8 H) B - watch: {
4 K, h5 d" W5 W1 r k- \/ c - "checkedNames": function() {
; q0 j. I5 z7 A+ F, \: m - if (this.checkedNames.length == this.checkedArr.length) {& V7 o q7 Y9 M2 R {- M- h
- this.checked = true4 m" W1 p# K& U% }* i; H6 N
- } else {
9 z8 b$ C, o4 M - this.checked = false
* ]6 v) `; P M X% D - }
; R9 n) g# V8 a8 I! T4 O - }
5 E; H+ H% {# g& g. j4 Z0 z ]1 }& ? - }% B' o6 j7 Z& d9 l
- })
复制代码
! Z6 z# S' r/ t9 n$ d
1 I: @4 M+ r) n r7 e: V" y0 Z; x2 _; \/ [% x
- a9 ~7 g5 @7 `( l0 S+ u7 ^0 q4 L' a! r
& y# L Y; q4 }' K- I% v% N
4 X& C( w! z; q; t# k" { i
) E( S# V7 A3 q0 k1 |% j& f6 L
|