cncml手绘网
标题: Vue.js 表单 [打印本页]
作者: admin 时间: 2018-7-4 11:22
标题: Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
' H1 l0 c4 c: R- u1 m
- <div id="app">7 b* i& h% S9 v& r2 s
- <p>input 元素:</p>
3 U6 Y0 [- v4 O5 b9 y/ r( D - <input v-model="message" placeholder="编辑我……">' x- p4 O: ^3 u2 J
- <p>消息是: {{ message }}</p>7 U+ O! ~6 N1 W0 d5 R
- 9 X( @3 y5 W& o
- <p>textarea 元素:</p>' K4 C8 y* p6 }6 _
- <p style="white-space: pre">{{ message2 }}</p>' H% Q! j2 }/ W% k0 O
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>. s. A( p' N; j0 \, u
- </div>* u7 `6 G0 ]- O9 u/ w
-
$ a' S: w* n9 Q: g9 Z9 ~% y - <script>
$ }) e: j: e f# E8 E' U0 e# Q - new Vue({
5 }" g! ?. X, J: s+ V - el: '#app',
* Y Z6 G8 X0 E# a3 T# } - data: {
* v0 g3 Y5 V# a, f# z - message: 'Runoob',
+ W0 d+ x# y, ^7 N8 R - message2: '菜鸟教程\r\nhttp://www.runoob.com'
5 w: |5 u% k( ] s# k - }) k+ s' w4 m" V1 g r- L( ?" `' L
- }) P' D, T9 ]+ I* G" T
- </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框以下实例中演示了复选框的双向数据绑定:
8 C4 V, t) j$ G- L, z' p0 ^4 b4 X- <div id="app">: K8 A3 M3 T4 Q" }; X" p
- <p>单个复选框:</p>9 ]) x4 T4 l) w k/ q2 T
- <input type="checkbox" id="checkbox" v-model="checked">$ \" Q2 r& c K+ V
- <label for="checkbox">{{ checked }}</label>
5 v6 r& n9 M/ b! R, p- i - - }# s' {$ h/ h+ }- k& b
- <p>多个复选框:</p>
# B, }/ x9 g, u$ B$ F2 c - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">+ b* v' X; X. t6 @* u, Q" Y
- <label for="runoob">Runoob</label>
2 c2 m0 C2 S5 ^. a8 y - <input type="checkbox" id="google" value="Google" v-model="checkedNames">
5 {1 g, F& X4 O" Y9 D' F& C8 E+ b - <label for="google">Google</label>
& F5 W" j2 E& n& j: \0 h - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">9 @# X5 s( Z( G" m9 Y' v' f
- <label for="taobao">taobao</label>' w, g& M S5 _/ Y$ r5 U
- <br>
8 M/ a8 @# p* q. c# R# J - <span>选择的值为: {{ checkedNames }}</span>/ ^8 N/ C W) x" @
- </div>' V' P: a+ u, }5 `
-
6 H4 G. x' f$ `9 ?8 J# B - <script>4 r4 @6 D; V0 }- P1 e5 ~
- new Vue({
: X' [5 d& F1 L8 n% P, | - el: '#app',0 `2 p# s5 e" i# T* p6 l- F
- data: {
0 V" c' f' \" F$ i$ `3 }) D6 i - checked : false,
- M" v- L# y |: N/ t/ m: E( H - checkedNames: []
( [% `) y+ s: t - }7 |- g @& d& h% s5 T! Q5 R
- })2 ^: Y2 D! }% H% y6 o' _
- </script>
复制代码实例中勾选复选框效果如下所示:
单选按钮以下实例中演示了单选按钮的双向数据绑定:
单选按钮2 ~% \3 n* i# K
- <div id="app">
+ O& v; C% ^3 V, H$ a- o - <input type="radio" id="runoob" value="Runoob" v-model="picked">
' _2 e: F! z1 t3 B2 ~# c - <label for="runoob">Runoob</label>
# `% j/ o# g! c - <br>
6 U- S5 X+ H) \, @ - <input type="radio" id="google" value="Google" v-model="picked"># c/ W _& e: V
- <label for="google">Google</label>
* f9 k) \' @) U) V* j4 } - <br>4 h; ^9 Q% y( L% ]5 F% G' y, o3 U
- <span>选中值为: {{ picked }}</span>
( a9 ~0 ] Z/ i3 j D - </div>' V" f0 G9 w Q& D ~3 _5 g. }$ L
- + {; G5 e! L5 f+ n5 J' W
- <script>
8 M: t4 z7 S& s: Z5 y: h! {/ S( ~ - new Vue({$ I/ e& D+ s) }1 ? o$ N! O: a( r
- el: '#app',
7 W* Z+ O/ m" t- ^8 w" R - data: {+ ? G9 ?3 E6 P$ q. C8 _+ \
- picked : 'Runoob'
& w; b) k" a! N* G* X( v - }
1 D( @, T* Y) w7 |- l F* z - })) R1 J( p8 @* y- e% i6 D# B
- </script>
复制代码选中后,效果如下图所示:
select 列表以下实例中演示了下拉列表的双向数据绑定:
select
! Y/ r1 ]9 L2 I7 H S- <div id="app">9 \: N1 L" Q4 _, t& n
- <select v-model="selected" name="fruit">0 g2 R& s/ m' Z5 n* {* g& r
- <option value="">选择一个网站</option>( J6 l/ z4 [+ z, C3 `
- <option value="www.runoob.com">Runoob</option>- h' d+ ^8 w+ |5 C+ g2 M6 i
- <option value="www.google.com">Google</option>
( H* r4 j) |: U! q - </select>
- w4 g% O7 V2 I. j$ \$ P - ' b. h' t# P7 Z' D
- <div id="output">
$ I3 e4 T/ _' b2 K$ Y" }# b$ z2 c - 选择的网站是: {{selected}}
/ |+ }* |9 c' U" B0 m - </div>
" [, Z. e# K A! q' a2 _ - </div>) m* F( \. D ?' ]$ h- w( c2 \
- * _% n' x3 \8 K b1 n2 ?, E; K
- <script>
. {' d2 w& e9 b( V- v - new Vue({0 D( b) D [6 C5 m8 o) s- O. @
- el: '#app',1 a, h/ y- x* G& ~' q
- data: {2 U) d; x* b7 O
- selected: ''
" b* T6 I% B2 y5 K1 T- g - }
" U% R2 ?* W/ I: g3 P - })
2 D6 D# c, B4 J8 \3 @4 k - </script>
复制代码选取 cncml,输出效果如下所示:
修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
- <!-- 在 "change" 而不是 "input" 事件中更新 -->$ l8 P6 M, G; |" P* y8 ?
- <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({ I( I9 y( M: I) M) Z
- el: '#app',) g: q/ l% ^ N0 I% S& J
- data: {+ ?& n( q3 Y5 l7 C3 T u9 r( W
- checked: false,: {. K, U9 D) W7 E* Z/ M1 M
- checkedNames: [],
, v& h7 X0 q8 S" s* `) ?; j7 u& ^5 c - checkedArr: ["Runoob", "Taobao", "Google"]2 a4 D% r3 I0 r* I$ o* M. R' G
- },
/ D8 z# O1 J( G+ w - methods: {
8 z* B/ \* A* i# P' N - changeAllChecked: function() {
" j0 { S* E# B; [6 ?2 \ - if (this.checked) {
6 Y; I6 M/ N( H& m - this.checkedNames = this.checkedArr
6 e% u/ d x* I( f3 x( B9 h* S8 p) i - } else {
- ]0 ~" R0 u$ J: A& ~% B - this.checkedNames = []
V* r2 G- U% h& c2 O - }
, z8 w3 b j8 E* a4 Z x \6 n0 t - }
' H, m: s W$ J9 k0 {3 Z - },$ k/ j( ^ k' d6 j8 o
- watch: {
8 O4 l2 b. v2 X, y* Q - "checkedNames": function() {
( [' T) Z$ k+ z' p" T - if (this.checkedNames.length == this.checkedArr.length) {
. ]8 J7 j$ W" J: u - this.checked = true6 |9 G6 z" Q( q
- } else {
5 o: @% P, i' m! ]' @ - this.checked = false
6 | A3 k0 l1 B5 n6 @- s - }3 v$ O7 W& |7 R: E% y% d
- }
* g. o5 _% {+ L - }7 f: y- [6 F9 j
- })
复制代码
- F2 O3 s# W4 X% i# z9 f( l5 \% R9 g" t$ v( S
5 T V$ n# M: y* i% r. [2 X( A
0 c0 D ]" g5 b i
+ s* j6 T( P4 J& u7 h+ k
4 P" D1 z5 {; K, e1 x, d, @4 ]6 P# Q
Z, e3 ^# A0 s" A2 z" G( m, l7 G( n
| 欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |