" H/ A( j) W9 u5 G1 W% c& x本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例" J9 _6 l3 }8 N& G; {8 j
( Q. ], ~& a$ X7 P( ?- <div id = "computed_props">
6 I. W- i5 U2 `, J2 W1 c - 千米 : <input type = "text" v-model = "kilometers">: A8 V/ |0 U* W i
- 米 : <input type = "text" v-model = "meters">
& S" e5 `- \6 \+ J7 D - </div># q: j- }/ q m/ [; l
- <p id="info"></p>
- |8 O* I6 t0 L: e; R2 C - <script type = "text/javascript">8 ^8 z) [ n( t1 K. K
- var vm = new Vue({
4 T: C2 {1 f* Z. P1 r6 Z) t- N - el: '#computed_props',7 Y; x6 f; B6 u6 j( V$ `" l
- data: {- c/ I/ w* ~8 p8 L$ d* H$ Y+ _7 Q
- kilometers : 0,
! q# r* Q( E! I- s' m6 M" X - meters:0
" x C2 Y) D8 X* B: R$ C- N8 i6 ^: p - },) N. t; _ X Y
- methods: {& `( Y' x% g o2 c$ L) k" R
- },& s7 E, V# l7 }" N1 g3 i
- computed :{/ T0 I- T4 w9 s4 w' L
- },
% k) G0 c5 T4 U! J - watch : {. R, N7 v* g5 c5 \( s
- kilometers:function(val) {
8 |" E# m1 ^: D5 G3 t# I M - this.kilometers = val;; m j Y3 H: o
- this.meters = val * 1000;
& k, T8 m2 u! I9 C - },& M* |8 {4 P! R3 g% F3 M5 u
- meters : function (val) {7 J0 i: b5 M$ k% N5 b/ N) @+ L; U
- this.kilometers = val/ 1000;% J5 V* R9 ]! [
- this.meters = val;
' F+ H6 `: J: P. D9 X) n8 h - }
# z5 J$ t n0 L. [ - }
) V9 p0 Y+ \- e$ o* ~: N - });2 u% o. P* w8 e
- // $watch 是一个实例方法
P: O' x* M- Z# w - vm.$watch('kilometers', function (newValue, oldValue) {" x. {( l1 U- [& s4 d
- // 这个回调将在 vm.kilometers 改变后调用( X& [9 N; X% T k
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
: P: J m. P4 J5 w* ? - }). ]* p) P4 |4 B9 w9 P+ @; J
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
5 R* @+ m( f. V1 c! E: s- A- ?, K$ Q+ |& }6 n9 I
, l. O% B2 x; p; [9 X
" e8 {+ c" f4 G |