1 y+ s @) }6 y, a1 }) I
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
/ _+ ? r) H1 @1 e5 d8 X# w5 e
7 k- o9 i& N7 L9 s& p1 R; n9 a- <div id = "computed_props">
! o. Q b1 j, Y" [5 G - 千米 : <input type = "text" v-model = "kilometers">( ~5 I% \6 @' y k5 c' u
- 米 : <input type = "text" v-model = "meters">
% \$ d- {" N6 Y N" f0 _ O - </div>
- r! j) Y' Z$ j `7 G6 o - <p id="info"></p>
* G1 d( ~) [! Y - <script type = "text/javascript">" u" L- Y; n6 v* ?4 @: J8 l2 z3 }
- var vm = new Vue({
. ]( u1 X/ U) K5 Y& L5 @ - el: '#computed_props',! \# p: L" p- K; i
- data: {
- r2 P: Y+ V4 m - kilometers : 0,
; q9 Y c& ]" e - meters:0
+ |# a: }9 W$ k) i+ O - },
5 G( v6 L, e6 p Z/ S: o& ] X* U5 y - methods: {6 j8 s& w) n' P l$ ^6 T
- },
7 y" W3 N: {/ C2 Z - computed :{2 [9 ]! e/ w) f4 M9 {) g2 D
- },2 p; t K% k0 `; x$ s
- watch : {
- r0 o& Y- k. H; M/ h. T2 r z - kilometers:function(val) {; x1 _, p4 j3 _* _% X5 e0 I
- this.kilometers = val;
* M# W; _# Q! j& H: j4 O - this.meters = val * 1000;
1 }2 D! h+ M: z4 x6 R/ N5 a - },
! q, `6 H0 m& ^ - meters : function (val) {
) U2 u) C) [/ a* y - this.kilometers = val/ 1000;
; F( _* ^+ Y( U: R - this.meters = val;
' ^7 r# Q1 `* i - }0 d @4 }( h* R+ ?, c W- Z
- }
6 {- M& x3 k. \) O' ~5 c - });
+ ?8 x7 p$ D6 e- L4 T9 y - // $watch 是一个实例方法
& l3 @# K' _3 I( S - vm.$watch('kilometers', function (newValue, oldValue) {
( A+ ?' O' s# f - // 这个回调将在 vm.kilometers 改变后调用: D* A6 a0 |% v/ J, [! ] I @
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
) D) Y# S7 T6 N8 ?) Z" U: O9 \ - })
L$ d$ I- ^/ X: j5 o - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 " R5 B1 `" t% L4 P. e# y3 u
' x% L/ ^& M, G2 W A: v; n
& o- {% O% D0 ` Q/ E( c) y$ }5 b- m* Q+ \3 E9 x' g( m1 f% ]
|