cncml手绘网
标题: Vue.js 表单 [打印本页]
作者: admin 时间: 2018-7-4 11:22
标题: Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
2 \, X" F: {/ o& p
- <div id="app">% }, k% q9 T. B: q" [4 w3 k
- <p>input 元素:</p>
1 U$ G" Y7 ~1 v/ M6 b - <input v-model="message" placeholder="编辑我……">% l" ^' g2 Y$ o) ^# w
- <p>消息是: {{ message }}</p>, N1 r2 G, i3 O! k3 b, K! l# G
-
0 E4 D) t' G( [' f* L) k+ L - <p>textarea 元素:</p>+ m+ _. \5 T5 e& e
- <p style="white-space: pre">{{ message2 }}</p>
% j3 P* ~/ J) |) c - <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
6 I- h# E. X2 | - </div>9 G8 V6 o1 ~) i
-
; e1 Y# m' k k7 j2 C+ @ X - <script>! X+ B8 g8 N( d# `
- new Vue({
" }2 e+ |( u* O2 v7 k% f$ Q x - el: '#app',0 g! _1 H. i0 S# O. I! b
- data: {
0 e, U& ]! e/ v0 l& e* j - message: 'Runoob',0 {) {+ o; J9 T q( X& P+ b
- message2: '菜鸟教程\r\nhttp://www.runoob.com'
0 }9 d4 S! a* C, w3 a( X8 n - }+ z1 l* I0 r5 f
- })
9 w7 W) D5 L' O$ ?0 h9 Y - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框以下实例中演示了复选框的双向数据绑定:
% d8 G! c* n7 J6 K; Q6 p7 ~' y
- <div id="app">
7 K/ a" T2 P( L9 e - <p>单个复选框:</p>- i8 G0 A! o1 M6 ^* z) L
- <input type="checkbox" id="checkbox" v-model="checked">1 N0 A; w5 j0 r% {. p9 G0 K; Q. _: @
- <label for="checkbox">{{ checked }}</label>
& ?& g" D% Q e" u" [2 Q9 z - - z! T7 g) i# k0 c. x! Q: N, Y
- <p>多个复选框:</p>
2 h9 D7 r9 C# L h2 K/ ^ - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">& ^* a: G4 P, y( }% k+ L
- <label for="runoob">Runoob</label>, N9 _" i: X8 M& G4 k
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">7 H- K6 m4 k7 Y& z
- <label for="google">Google</label>
0 F$ |0 b. v% h- G4 k5 E/ o! v - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">" Z2 w. y# o' P8 N8 d, f8 X
- <label for="taobao">taobao</label> ]# @: d+ i, S0 ]$ g
- <br>9 p. ~( k: h- h7 p7 O
- <span>选择的值为: {{ checkedNames }}</span>
2 b; H% I( @- K9 G" o- k; ]& \ - </div>7 {/ Q' V! a' A' ]( Y) N
- ! k6 L2 f) l6 ^0 S8 j
- <script>" [" P/ c+ A) j1 a
- new Vue({8 \1 W, \! @- J
- el: '#app',* o/ i. R8 F8 S6 O" l7 |. b6 Z
- data: {
# f4 a8 @( T- m% }3 g+ w2 F - checked : false,8 }/ i$ k8 c( x0 e2 [
- checkedNames: []
$ f1 L' L# k3 w/ x" ] - }+ F# L' J9 }7 K
- })2 G X* q" y% W% u! }6 q
- </script>
复制代码实例中勾选复选框效果如下所示:
单选按钮以下实例中演示了单选按钮的双向数据绑定:
单选按钮: L, i) k7 D0 Z) }
- <div id="app">- M6 N/ G, `/ A) v; U3 \8 h
- <input type="radio" id="runoob" value="Runoob" v-model="picked">
/ T* g. d* @- U K- ~+ I; I6 G - <label for="runoob">Runoob</label>/ M) E' c5 e% k" e
- <br>
' z0 k$ N) ?! o8 L - <input type="radio" id="google" value="Google" v-model="picked">
/ Z. \+ }! _& D9 j4 c: S/ l - <label for="google">Google</label>( P& {) F7 T) y
- <br>
" x% k, ?/ b( Z0 v - <span>选中值为: {{ picked }}</span>9 V. p8 ]' @, N& ?
- </div>
; T. w- A! s2 p& D& y5 f - 4 I$ m( t, T* j" l# g' Z: i t
- <script>$ I3 P: I' D/ m; }: k. v
- new Vue({% ?" K/ W9 A( P+ m
- el: '#app',4 B4 U4 S$ U5 p# v" _' c
- data: {8 F% H. E+ k( h: v0 [
- picked : 'Runoob'
6 x! Q; Z+ M" U; K' J1 u0 w' F n - }; b7 p+ t1 q u3 |. H7 ?0 U
- })
2 y$ P' D* k$ y F) ? - </script>
复制代码选中后,效果如下图所示:
select 列表以下实例中演示了下拉列表的双向数据绑定:
select
/ k& [/ S! P9 }, r# B/ E* F4 Z- <div id="app">+ p6 l) J3 t% m8 B' E
- <select v-model="selected" name="fruit">/ y; m! L! ^# t, u
- <option value="">选择一个网站</option>
% G) E; A a* g+ ?- M$ P - <option value="www.runoob.com">Runoob</option>4 O. s7 s9 b, ]+ ~' e
- <option value="www.google.com">Google</option>
! o g8 P. n8 X j* A0 p4 | - </select>) K6 T7 V, J1 O- O* M# n: I
-
( k, l5 ~; B( O7 n8 x# C - <div id="output">) f$ Q4 G0 M+ Q
- 选择的网站是: {{selected}}/ ^: A6 V/ y; |- D" F
- </div>
1 t) R( U! v3 B) Y' o0 G - </div>
+ n2 l% L, u' i/ L' K2 v - 7 b: ]! o/ i5 M5 Q+ ]
- <script> e6 G% y8 z5 X
- new Vue({
# M7 w, O/ B I) m# o - el: '#app',
( [: f3 d" A; |7 b! u' B - data: {9 f3 J4 ]0 b# u& m i
- selected: '' k1 R) a* P( Y& a4 V+ Q
- } q* W, V- Z G' ]7 K
- })
: q; S3 E1 s0 K& }8 H# I+ E - </script>
复制代码选取 cncml,输出效果如下所示:
修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
- <!-- 在 "change" 而不是 "input" 事件中更新 -->5 T' ^& B& u2 R9 y9 `. S: @
- <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 w" M Y/ e0 s$ l1 x! r - el: '#app',
' i m6 ]' ?3 E& P9 g0 q9 D - data: {. ]+ O. h* Z5 C# B* X; ]- k4 c
- checked: false,
( \% `0 `' A) M' ^- m - checkedNames: [],
8 i$ [2 d& V9 ?) @2 P - checkedArr: ["Runoob", "Taobao", "Google"]
" c) B Z( n+ ~ - },
. ~9 M' e4 p) v- L& ] q# r - methods: { @0 A! c2 @2 w4 ]) B5 g) o
- changeAllChecked: function() {3 b7 [+ X- J, U F
- if (this.checked) {
3 g8 f5 J' |1 L I$ w - this.checkedNames = this.checkedArr
" H/ w# c: |: Q- P. v3 K, y, [ - } else {6 K5 S" j! ^0 M4 _
- this.checkedNames = []- V/ K _9 w$ p
- }
# w/ q. t5 N) ?+ Q4 t7 H - }' b+ N" I, |2 a
- },& q; b7 _% d: s7 e D3 c
- watch: {6 L& v( l+ q6 \1 q5 B$ J
- "checkedNames": function() {: e$ `$ A* [, d1 r5 ^+ {
- if (this.checkedNames.length == this.checkedArr.length) {! g# ]5 M8 g4 ^% L4 S
- this.checked = true
/ s( d1 O) y j1 P. Y - } else {
9 I- D: S' E) {9 z7 _ d4 i - this.checked = false' z* N& r- }+ {4 s, t
- }
0 B, e F0 k7 ~6 D& f% h - }
% K# m: l- b" P - }
* C) D8 a. j' n! b& j4 U& r - })
复制代码 2 X3 F: w8 F. {
: f7 W3 y D3 g6 A1 @1 _% @% @0 G" h, c; l
7 B2 ^ `) X, t6 Q5 e
7 S3 d9 ^8 e7 @6 Y x* X, d# R0 F+ }$ H0 J
; N% z4 \6 f0 P( b! p
5 T& M$ _7 _+ J5 E" P
| 欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |