这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:
$ o" l Q6 n g5 T$ C( a- <div id="app">
/ Q/ p4 ?/ B3 E9 L - <p>input 元素:</p>
2 L: ^ O' R, e y. J, X - <input v-model="message" placeholder="编辑我……">
: i$ E$ O( p8 H1 t3 B1 [ - <p>消息是: {{ message }}</p>. T' X- c% D$ ~: u3 F
- + n7 z) N* ?) h4 \) h% I+ ~) E" q" e) S
- <p>textarea 元素:</p> @! @- @& A! a' G( Q8 N
- <p style="white-space: pre">{{ message2 }}</p>6 Q q6 P% f; o# j5 V& u3 C$ M
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>0 U: O! A9 z$ }! t3 j
- </div># B. p/ R) j8 Z; Q2 q3 o' M3 Y0 F3 s
-
+ N! @$ h5 i) Q5 h. P5 U8 a - <script>4 `, q+ \) \7 }8 ]7 S" G1 [
- new Vue({& g3 k. j4 t: V4 w
- el: '#app',: `8 J+ `0 M, @. g7 A
- data: {
* D: v0 t* q( Y' u7 M7 f6 a) ~ - message: 'Runoob',
& _3 K- n, n- s" m, l, K - message2: '菜鸟教程\r\nhttp://www.runoob.com'
% a" M- l [' G) T4 X7 F - }
( @/ Q+ e. ]5 f8 K - })
^) M, c3 |, d" B7 }) o9 X - </script>
复制代码 复选框复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组: 复选框以下实例中演示了复选框的双向数据绑定: % S* A! V w6 f1 j0 X
- <div id="app">4 Z L% K5 k$ d# O: G
- <p>单个复选框:</p>$ n; Q) u, Y3 Q7 B
- <input type="checkbox" id="checkbox" v-model="checked">9 L# g3 {3 e! Z! \1 x$ T" Y+ }
- <label for="checkbox">{{ checked }}</label>
; _8 b3 A l3 \' H0 q/ ` - 5 t T7 y5 S3 e- N
- <p>多个复选框:</p>
! w& {( v% Z; N% { - <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
8 U& \5 p w" D1 O - <label for="runoob">Runoob</label>
! R+ e, t+ ~. p( p- b' } - <input type="checkbox" id="google" value="Google" v-model="checkedNames">3 W9 ?( M5 S7 V; r$ N
- <label for="google">Google</label>
4 j- J- e; T# T - <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">, `* b. C R9 H
- <label for="taobao">taobao</label>
) c) l& r# X. ?5 c4 v3 L( Y - <br>3 ~6 F/ Y+ Y; }: s% m0 V
- <span>选择的值为: {{ checkedNames }}</span>( y) L6 h( _" K0 i5 C% U6 m9 s" P& A
- </div>
- d3 V4 N+ B8 a) X4 f) H' X -
* t, }" b2 \6 i" H3 {& l - <script>. n9 b2 `) a4 p0 z5 Y$ ~0 t8 z
- new Vue({
$ [) s5 B# ?+ d, i - el: '#app',7 d! X/ @) o- ?% A
- data: {
+ v/ E8 W2 s, x- m" L% O" B - checked : false,# { x1 Z% N U- u0 ^8 B1 Z8 p
- checkedNames: [] U" X* u |3 w- q( z8 p- X
- }
/ S5 z# V @/ W- S: z - })
" E" W2 X- l6 q5 Z - </script>
复制代码实例中勾选复选框效果如下所示: 单选按钮以下实例中演示了单选按钮的双向数据绑定: 单选按钮% K) j+ j s* |$ E
- <div id="app">
( X0 q2 z, r! k3 L - <input type="radio" id="runoob" value="Runoob" v-model="picked">
5 Z# B4 a+ d$ Z - <label for="runoob">Runoob</label>; [- d2 O2 S6 H H6 h" [
- <br>/ n- G3 W* h1 K6 _
- <input type="radio" id="google" value="Google" v-model="picked">8 M/ |- B$ z7 O" D
- <label for="google">Google</label>
) O: D* ?7 k$ H8 j5 B4 ] - <br>
, b5 g7 |" F- w* L4 g - <span>选中值为: {{ picked }}</span>. O) [* O# c2 A1 V2 c5 `
- </div>8 n l E- O4 r; c5 r' k% \
-
7 X/ j' ]/ U2 ^3 L8 C9 D; N - <script>; q7 ^% L+ X x& g7 W/ }
- new Vue({
1 k# @- E% ^4 w$ k - el: '#app',
2 R1 [9 E8 i! s) \; z9 \ - data: {
9 Q+ j9 W0 e& g8 o- t* Z' e - picked : 'Runoob'/ G" @" g: q' y* i
- }* \, p" w( e; Q7 L/ \8 F
- })
" b) Q2 G0 U: U8 v8 B! z" h - </script>
复制代码选中后,效果如下图所示: select 列表以下实例中演示了下拉列表的双向数据绑定: select5 }1 l5 _& u* E
- <div id="app">
$ s$ b3 [& S7 c5 F$ E/ P3 I - <select v-model="selected" name="fruit">6 J6 r) c" u$ S- w; N
- <option value="">选择一个网站</option>. W5 V, z/ S! ~
- <option value="www.runoob.com">Runoob</option>
3 O1 A% z% C- i) ~" m5 K# q - <option value="www.google.com">Google</option>
, M9 s% F8 a; C9 R! \' X - </select>6 P d4 `2 R) b/ g+ o
- " m7 g A5 s5 i4 p& V% O9 y+ T
- <div id="output">& F& q& M% ^3 h, x6 S
- 选择的网站是: {{selected}}
/ t+ @6 U: {5 }+ Z, l9 Q - </div>' c5 d) n9 T1 d4 h" W2 h! c
- </div>1 ~6 {4 j9 R5 K! X1 u$ q
-
7 Q2 J8 ?+ Y4 i. B - <script>; `3 C' e3 a! V" a
- new Vue({
" u0 }1 l5 g$ h. o0 L) t - el: '#app',
7 q8 I, E/ E3 D1 A' o& m) V2 H - data: {$ q3 r/ x( m9 w
- selected: ''
9 w G1 {/ N! p# E% T( v - }4 ]# \, d3 b2 B! I
- })
' k. w$ u% y0 b - </script>
复制代码选取 cncml,输出效果如下所示: 修饰符.lazy在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: - <!-- 在 "change" 而不是 "input" 事件中更新 -->
) o# e4 z! M9 g+ u" M# L7 D - <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({8 w5 l+ b6 J$ n I2 v1 U
- el: '#app',
/ N/ Y$ `( `% k. R+ L9 a - data: {% k3 V3 L6 g" Y* x; Q& x
- checked: false,
! ]6 [+ b6 F1 K; S [ - checkedNames: [],
R4 a% n! X0 S4 {2 j7 m+ U - checkedArr: ["Runoob", "Taobao", "Google"]: d0 [1 k% V9 P
- },
( H# s, R& i, u% f9 W8 E - methods: {
% V$ w. }& O& c6 v6 k( W3 r - changeAllChecked: function() {
! J9 b! q% H) P* B3 ? - if (this.checked) {
3 }8 Y# }8 a7 x$ u - this.checkedNames = this.checkedArr
" v7 b* I9 r7 A2 E2 I* f+ { - } else {& Q+ @/ I! S5 o! ]' d+ n
- this.checkedNames = []6 p5 M8 A- [& g5 w
- }3 Y5 t7 e* U0 c+ u" _3 S
- }
) c; H+ d( ~8 [) X9 p* F - },5 m q Z" w L. E, v1 z, \% r* j
- watch: {
' r& `) j4 U8 i! s% v - "checkedNames": function() {5 k, ^3 i6 i' \$ }. V
- if (this.checkedNames.length == this.checkedArr.length) {
^! i/ a+ ?$ [0 S1 @1 v% a - this.checked = true1 C5 p* {5 d) {
- } else {4 a6 @- z, W7 H: X
- this.checked = false% Q+ c* Z2 S9 {: d
- }
5 y: e) w" v& j6 S - }6 S7 r/ ?/ a, G) ` f
- }0 ~) d0 Z$ M4 p) i. B# B8 R0 C
- })
复制代码
. L( F. V) r0 l2 S: x* j/ L; ~- w9 \1 x9 n2 G8 k2 e
$ ~1 D2 y4 f' d9 x
/ R+ L3 Z5 ^/ L8 N3 l9 Y
: s1 w, s. M! u! {8 z) O$ D. O
" W' p3 A8 z+ N7 B1 I5 B
3 I3 F8 s) `# {! @( O
1 |' c, d4 ?8 s0 X* x
|