- ^1 s6 _& {) P/ m( f/ N本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
9 }9 k |+ K. x5 G; e
2 Y1 X5 s$ e e2 L9 L; W- <div id = "computed_props">% h3 O( ]1 X3 I& u, c6 S: x" M* m
- 千米 : <input type = "text" v-model = "kilometers">
) g4 k) Y( u! W/ n! H+ q - 米 : <input type = "text" v-model = "meters">
1 D" |. I) k) T' m2 Y - </div>/ b2 h4 \" d* _; x5 M9 ~+ X+ x
- <p id="info"></p>/ D; J6 L. q6 R1 I
- <script type = "text/javascript">
0 V* B2 M a$ f+ w/ g - var vm = new Vue({4 }, U6 n0 s+ V8 }$ \. d5 i$ r0 V
- el: '#computed_props',, u1 \& \4 M3 \' \& N. K
- data: {
: Y# o; e/ y) w/ U6 `- L6 M - kilometers : 0,
: C) |# P. \% F v9 n - meters:0. d* k! G+ r7 w1 ?- @$ r2 [1 z% g
- },9 z% a- _. u3 u1 l
- methods: {1 N. t( Y5 P) _1 y
- },
q# O9 Q6 U- N. @5 a% s% X - computed :{
% a! a9 v; ~% R4 b - },3 g6 y C( h0 G1 E3 _
- watch : {- X: }1 x: }% g: `- i* G1 e5 i" d
- kilometers:function(val) {4 r+ O) U6 ~& o9 {' J+ o
- this.kilometers = val;0 ^) v- x- {0 J' L8 F M
- this.meters = val * 1000;
$ y/ `7 ]6 m$ A# e4 v* v - },
9 C9 C+ D# t- l1 R' C - meters : function (val) {( j: }! l2 }; L& p3 T: r! w
- this.kilometers = val/ 1000;4 ~8 {, f4 F" M- B
- this.meters = val;
! }$ g/ m2 u7 z - }
9 |' ]$ N5 n# k( [ - }5 d) [" g* e v1 c
- });0 U- k: }( K+ e, B) H* \2 W8 R: T0 @
- // $watch 是一个实例方法& g+ }6 x2 i5 D' m3 A! k, V2 h. a
- vm.$watch('kilometers', function (newValue, oldValue) {
, O; v0 @. j% [6 T# J* X( T - // 这个回调将在 vm.kilometers 改变后调用
* g9 o$ \" N0 ~ - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;9 ^. X) `- Q L: H
- })
, i. B( c) N" P6 V4 V2 } E - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
$ E! W8 J1 b' T4 }; \4 W/ k) f, H4 O% |2 O
* a' `1 M+ p) A- f; |( f7 o
3 P4 ~" x! A, Y |