6 Q( y9 j+ M! S4 a本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例$ j! m: {8 L: H+ K2 u3 @3 M% U- O
. @4 |. Q& x2 N. e
- <div id = "computed_props">( W) q' Y' G& D- \
- 千米 : <input type = "text" v-model = "kilometers"> d; l9 h7 t# W
- 米 : <input type = "text" v-model = "meters">
. s( c, W3 P: r" [9 r; O3 ~ - </div>
5 F0 ]% ~+ S! }( K- ?* m - <p id="info"></p>. M2 h2 W% P, e$ q. y
- <script type = "text/javascript">
$ F3 A @ ?8 ^4 v - var vm = new Vue({
( g/ Y2 I5 _+ z5 O0 `8 B I - el: '#computed_props',$ b6 C) y- y6 R% K
- data: {
, H- \& K) e. u- R/ ]5 O - kilometers : 0,6 c% @, T4 G3 y! e5 R4 E
- meters:05 Z# B# O# R; i' o' J: q A
- },
& N' R$ k) W, K+ C+ s* U - methods: {& f. Y- E( O' z+ y5 ~( Y# e: c5 O
- },
# T2 W$ c \1 W$ u/ f - computed :{
9 t: D: E& c2 y/ p - },
6 b% w* C/ R% |% v2 B - watch : {3 D" G' Z+ E; P+ m6 `7 f
- kilometers:function(val) {2 |( a0 C3 e" S3 |6 |
- this.kilometers = val;' A) B$ {" l( p+ n
- this.meters = val * 1000;
0 C9 l4 J" X/ p5 K5 N" U - },; H9 ?3 ]3 a) g) T( F' i0 j( }6 s; x
- meters : function (val) {
* j o$ S9 Z: k - this.kilometers = val/ 1000;
! x# Z8 d/ `: j - this.meters = val;, M7 V6 h6 a% q+ A- N# l
- }1 P% a; {3 w- K; x. x
- }' p7 ^& l% Z" |$ K. W7 |3 y
- });
! |8 f2 Y- \2 i - // $watch 是一个实例方法8 y, B; c, A+ i% n0 B+ W$ Q
- vm.$watch('kilometers', function (newValue, oldValue) {
! P3 k2 r! J, b6 {# m# u1 o* X0 C' u6 [ - // 这个回调将在 vm.kilometers 改变后调用
/ ?3 x* W( C) d# ~ - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;4 {' E2 p+ S% U' z: D/ h Z
- })9 U+ ?4 h4 N; w8 {9 l' \0 E
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
* [: N. o9 Q6 \2 r3 b& M- Q3 `4 E% c& W: A% _6 M
& U; k) W) w% m7 b; u; L
; e2 z! o, Q( E% u0 c' g" p% u |