, p. @( h8 Z! l, R+ m6 S
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
3 C y& {4 ]# w# j) w( k( F \" _; M0 c2 j
- <div id = "computed_props">
/ A$ J8 E4 }; k& Z2 q& w \ - 千米 : <input type = "text" v-model = "kilometers">& E+ c' H- f# a! h9 _. F9 [( E
- 米 : <input type = "text" v-model = "meters">
1 R0 F. F& @, j( S, f$ E - </div>! w% q; A2 {) c( F; \) y( U
- <p id="info"></p>
4 b4 Y7 r7 u0 Y% I- S+ Y - <script type = "text/javascript">
/ o! i" W* g- z+ S - var vm = new Vue({$ U+ h9 w) `& |$ J$ s: x; ^) ]
- el: '#computed_props',
7 I$ L( X! e4 Q - data: {3 n' Z. V+ D! G0 Q- }' }% L
- kilometers : 0,
# i3 }& w' v! n - meters:0) ^) @" k; U. k' H8 U9 V
- },
. e- S' t! F" G9 t/ }8 N - methods: {- m7 L. `3 u* }- O- |% N
- },
6 U+ R0 c, d/ f" K' c - computed :{: r) }+ ]5 N* s7 E* S7 z+ e
- },5 C2 n( O6 R( L" U
- watch : {& G5 s& G' G7 H: C) I7 \
- kilometers:function(val) {2 \' S: M) q1 \
- this.kilometers = val;
1 z2 e0 Q* z' n4 v* e6 i - this.meters = val * 1000;/ q" [5 ?2 N8 I7 X! u
- },
$ z/ M4 p) U1 n, j Y7 ~* P - meters : function (val) {" j; n8 Q6 Y" T7 G! Y
- this.kilometers = val/ 1000;; k4 Y! u' k0 m- |, M* m
- this.meters = val;+ c% | D( C: V& B# W
- }
: B/ n7 E9 C4 u7 A" `( N7 v - }
1 N; _* f& Q/ n, j& G - });( W' u: X5 M3 j8 D% g+ d
- // $watch 是一个实例方法
$ v: f2 i) r$ D3 N* d& u! y- Y; n - vm.$watch('kilometers', function (newValue, oldValue) {! l: k9 r5 k9 w4 Z$ m& p
- // 这个回调将在 vm.kilometers 改变后调用
- o* K% T+ K) r9 } - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
4 r- J9 M9 A" P; j; w2 y - })# _5 W% {* i- X( I0 s' d: O
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 : `7 K8 L3 z' ~) t! {' f6 _
2 F- h# r/ p8 b1 i
; C: }. ^) M& K# b. N1 O
$ p3 N6 y% K4 Z R1 \9 K: B2 o H( i8 q |