/ S" o$ k) o, ~* I$ t
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
2 Q2 a9 M% L) [9 K5 y! V: Q/ q: P8 ~6 {
- <div id = "computed_props">
1 M7 B/ ~# N- n5 ? - 千米 : <input type = "text" v-model = "kilometers">
/ b7 q# P4 U5 u! ?- K - 米 : <input type = "text" v-model = "meters">
% T4 X4 k% o8 |! {: p; Y - </div>+ j. n, H* ]8 g% \* N1 a- J
- <p id="info"></p>- N( C- Q, S" s9 {( @
- <script type = "text/javascript">" q9 G7 C* [" n) l' p
- var vm = new Vue({9 V8 R t! Q5 g! X7 @
- el: '#computed_props',- `) X, o& ]- Q
- data: {: P M# x% Z0 u; D- y
- kilometers : 0,) U' {4 b. O3 t
- meters:0
' G. ^7 k p' g. T) t - }," m2 |" V' v! X T/ b) q
- methods: {
7 G( a/ c- y" e# F3 C x1 o - },. e; R- t/ X m# @" W* e
- computed :{5 w0 V+ `& W% L {9 x5 K
- },' H- y) g9 @' J0 X
- watch : {
) M0 K! H o8 q" `) L9 K% N* n - kilometers:function(val) {6 }. [! r& C: z8 }* V! @: q
- this.kilometers = val;
5 y4 v( t, c. U v1 x! @' A - this.meters = val * 1000;
2 z4 U' g' g! F8 o$ r - },
+ a& J5 g+ r7 w( D' } - meters : function (val) {
; \8 ?( p- O0 B! |& L) C! l- p - this.kilometers = val/ 1000;
% w1 S* ^: B6 g \ - this.meters = val;0 e2 u! h0 o6 R
- }
4 s8 k) b: f2 L! ?7 M- c - }" T( p; |3 l& L7 u/ j
- });$ k j; t6 f' v; n. D" j; G b" z
- // $watch 是一个实例方法8 l! G4 K. [( u0 H O9 G/ D
- vm.$watch('kilometers', function (newValue, oldValue) {
' V0 d; E3 z4 }$ z - // 这个回调将在 vm.kilometers 改变后调用5 e# |0 U4 M7 K3 v+ G8 v0 ~ Y
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
, S3 Q; P7 ~( n# h( \ e - })1 O6 A1 _, d+ M* V( D
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 8 L* p, t! L* x' F; f- ?6 I
# A. q& s7 t; z8 S. g/ o" B6 t7 k8 e" U- I$ j$ O1 c
' o# m3 V" O: C |