这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
A( d& D2 C: j6 G- F% F3 j6 \- <div id="app">& }; y9 A( [: w3 k& Y) }) Q. K, m
- <p>input 元素:</p>5 ~) e1 N/ v) i$ {
- <input v-model="message" placeholder="编辑我……">
5 m" P9 c! Z. J2 r! }9 i - <p>消息是: {{ message }}</p>
8 ~" v% d; B- K! f# J* j! l/ W - 8 R/ ~& K% `) a% Q
- <p>textarea 元素:</p>
* P0 ^( y& @. `) s: c - <p style="white-space: pre">{{ message2 }}</p>: I3 J# l# U8 n" t: J( f
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
5 q0 {" ?6 Q+ s - </div>- `: |2 L% U5 T2 z4 E
- - g$ K& h1 u- _$ V
- <script>
7 m* q3 Y+ S' G+ c2 u - new Vue({3 _8 E, _6 ^# ?* @
- el: '#app',0 h6 d8 `) x& }0 T
- data: {" P9 r* k" @% y
- message: 'Runoob', J: k! M7 X9 ^( n
- message2: '菜鸟教程\r\nhttp://www.runoob.com'7 Z) ~+ F$ r' i8 p
- }
3 y8 p( [; l0 ]- _ - })
x% B1 j) v7 V9 x5 W& N& } - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定:
: e) ^( F# c. v7 k- <div id="app">
! g* Z m2 Y+ K2 V& [ - <p>单个复选框:</p>! T6 U3 [# r2 y. V2 r
- <input type="checkbox" id="checkbox" v-model="checked">
+ v2 S* [2 `( @+ s5 V - <label for="checkbox">{{ checked }}</label>- h" d) Y. ~/ I3 J
-
: `: N# ^) [ N9 _4 w7 y - <p>多个复选框:</p>0 v% s# ?6 M% |7 Z e( w
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">$ x+ P5 m. z; e
- <label for="runoob">Runoob</label>; K6 |' M# `7 H' X2 e/ B' d
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
% v% w! u2 E7 ?3 y* T: v - <label for="google">Google</label>
5 U. i+ C5 s2 i" y- j - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
- E% p e7 K/ S% y - <label for="taobao">taobao</label>! ^/ C9 t9 d4 ?8 A$ T7 r& P8 ]8 A
- <br>
, a) k Z% I2 i5 {0 N - <span>选择的值为: {{ checkedNames }}</span>, d. I: I! p. ~! U6 ^1 s& H) [8 N3 \
- </div>
3 q6 Y4 d! X+ h" N+ H - ) i" ~% p$ ~( J" U e0 D6 o
- <script>
/ Z: A' C7 }' K/ g( U - new Vue({
$ M: X0 ~1 Q5 }$ e+ m1 ]" J - el: '#app',
/ ?8 ~& x6 |. O, J- V+ t t - data: {- j, K# y" k5 f) T* l2 B* H0 E
- checked : false,8 p0 u8 P6 c* J( P( d2 p
- checkedNames: []
( h( q: i( M+ f6 z; W. j - }+ I/ }3 b- m* h
- })
3 L" E% n& M# ~0 c; o: K - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮
; J5 Y! v/ ]1 C- <div id="app">
- f- F( X: N+ `; M4 g* g8 y: o0 c - <input type="radio" id="runoob" value="Runoob" v-model="picked">: ~/ }6 {8 E5 W! V" o1 s, C3 p2 c
- <label for="runoob">Runoob</label>
5 v# H, C0 \0 G+ B - <br>
$ ~% Z* m$ s# e b' F9 S - <input type="radio" id="google" value="Google" v-model="picked">
( J3 f8 _* C; T. |& ?6 x H- K - <label for="google">Google</label>
( x6 H+ c7 U" Z - <br>
5 r; Q0 q. T& g$ O/ a - <span>选中值为: {{ picked }}</span>) h5 H ?4 m! h- h' {+ \/ r
- </div>/ E: _1 B* d: h. _ E9 H. j+ X
-
7 ?: t. Y' Z9 E$ k6 I! b - <script>6 a8 f. y! ^* r2 Y1 @
- new Vue({
4 `# A$ @) F, x7 n - el: '#app',
8 D% } q p8 ~' J - data: {
& j) U( f4 Y* t9 X) v0 t! f - picked : 'Runoob'
% f3 Q7 [5 ] n3 q' z, K - }7 ]. \* Q0 l# q
- })! k: ?9 u$ U& z/ S
- </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select
& Z3 V0 M- G5 c# L, M- <div id="app">
; d7 ]' \& ^7 O, u' {9 k - <select v-model="selected" name="fruit">
, h7 }4 [2 A, b. Y5 k( m. P - <option value="">选择一个网站</option>. K& h1 Q% t z; Q/ m. T% G
- <option value="www.runoob.com">Runoob</option>
y+ Z( w v5 N. e6 [ - <option value="www.google.com">Google</option>
' ^: m7 b% J! W' \" \4 S - </select>
$ Q5 t& L' M. s9 P) d - : i1 M1 V% P$ Y. n# f: N" }
- <div id="output">
% G; ]* G4 v! @6 m; C - 选择的网站是: {{selected}}% r- M1 F( e7 ~' \9 w) [0 h, L1 i
- </div>
) [5 P0 f% g% I( W5 }/ t - </div>
: {- m9 c: j6 M) ~3 L -
9 `, I1 G6 F* x. `2 G3 t1 D - <script>
$ r5 \* M) d/ Z - new Vue({
5 \/ ?8 N4 l% u4 S2 U - el: '#app',& N& {- {0 t7 {: e
- data: {* m& t" h- g; w1 R; V
- selected: ''
3 \+ R% ?! `# c3 _; Y8 b - }+ L, H: I+ Z% Y( ]7 b
- })
' w8 ]+ `/ C. b* Y4 B - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
C" Y7 A. n2 W2 {/ u9 }' T* g - <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({% c# s9 P4 ~( {
- el: '#app',/ X1 V& C4 _. V/ ~! b( ?: M+ H
- data: {
' l! f4 I3 [ z/ _0 Y3 X - checked: false,
; @1 @) f5 y* U - checkedNames: [],0 I ~5 ?3 w7 E& }
- checkedArr: ["Runoob", "Taobao", "Google"]! {6 T% d( ~- v' R0 @' [: H) A8 L
- },# y9 ]- N' j9 i! o2 z1 Q! I
- methods: {. U0 O$ y$ |- h! @- t- i
- changeAllChecked: function() {& T+ m1 c0 S2 m% I) r
- if (this.checked) {3 f1 X$ \ l T0 u$ S9 d1 ]
- this.checkedNames = this.checkedArr' Y/ B* z( [9 B+ c9 S4 z
- } else {( r! ` j9 H% q. X- W6 K
- this.checkedNames = []- @! L+ N+ w2 }) @4 C
- }
# C- Z' E1 l# X1 \6 Y - }( ?9 a6 {" Q* O* l3 o* g8 r. C
- },
& ]5 `6 ` r, p* Z0 x - watch: {
1 k% ^* f* Y0 Y3 I; C4 A - "checkedNames": function() {
6 Y, N5 [4 h) R0 C9 p - if (this.checkedNames.length == this.checkedArr.length) {- F) [. j* L3 o% r6 {, J* L
- this.checked = true! F/ d. L2 J P; b' U3 i
- } else {
- {* a! U% ~. ~' z7 A% \; q - this.checked = false' V% M. t$ H0 O* f8 x: o/ X+ h
- }
, }8 _ E; d: E5 M5 O% d& E- q. ]! w - }' U5 Y: Q+ }: j; G
- }& Z4 L$ ?( B: }
- })
复制代码
3 D3 q4 q7 K. u5 u- l3 I2 g- T' s3 q5 F* i6 K1 {
: s) m; o" _4 t: _ P" `' ~
2 h) p9 f: g/ P
f! F3 j6 L8 L* w: Q" q2 G; K
$ Z3 k& e$ H1 A# z
h3 e- m8 A* s" L7 a( l% t' R9 T8 f8 G; E
|