8 u$ X6 ^) W% L7 p2 l本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
+ x! q! l5 H3 F0 q$ i% L) E2 X; v- c5 T! C
- <div id = "computed_props">1 M( [0 Y7 q- y0 g7 F
- 千米 : <input type = "text" v-model = "kilometers">
& d& E% z) d$ Q4 U+ m - 米 : <input type = "text" v-model = "meters">( X8 {3 Z9 y" y/ e
- </div>6 G- J0 F: u8 |2 v3 ? z6 U
- <p id="info"></p>
1 G, r+ d1 [. @ - <script type = "text/javascript">1 k/ B B6 I, V
- var vm = new Vue({
; r3 j: t* z: ]' r3 g - el: '#computed_props',; q: D. c9 @1 s+ F' b. A2 P
- data: {
$ P7 p! u0 s' m, l0 Z% f3 D - kilometers : 0,
! w O3 G$ v1 q+ {5 W L' {6 E - meters:08 Q6 Z* R4 {7 [4 I1 Z
- },7 |/ T, g8 b9 h+ {7 V* k2 u x
- methods: {
: G, ?7 E1 D2 o+ t4 r/ L$ u - },
% @, @0 {: G# d5 P9 f0 C- M - computed :{+ Q+ q) \* A: g+ @" u, X
- },
& ?/ \' w( i* U" ] - watch : {
6 Z& s( O' X' C# o" b! h% W - kilometers:function(val) { J9 @5 ]3 T% Q8 A" |; F' m
- this.kilometers = val;
# c3 d# o- W* b# q# Q - this.meters = val * 1000;6 Z; ]& `/ \/ p( _" @8 t/ j
- },
% ^6 n8 [0 a7 C4 r$ v& P! [ - meters : function (val) {
/ m! k# A! c3 L: v) L. ?, e - this.kilometers = val/ 1000;
; ^# _. l) p- G/ z5 u' I/ ~4 C - this.meters = val;
6 g4 S) @( H. h4 z1 } - }
8 Y& p) D9 e' n* x4 v8 i" G - }
. f5 _ g: P: J% M2 W; m0 I" B - });# Y* t) l: O+ L6 P' P
- // $watch 是一个实例方法( U4 J% K: s K9 \- o0 e7 C
- vm.$watch('kilometers', function (newValue, oldValue) {
4 ?( X/ q1 B/ Z- Z - // 这个回调将在 vm.kilometers 改变后调用
7 i1 H" k+ K& k: V: X7 ~ - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;5 ^( z0 Y. I5 ?' j
- })
$ O n8 x d4 h$ d - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
- w \# L: q; b, c4 K3 \- t9 |; O- c
) R7 ^* ^+ ~& k: k9 F
: B' p7 B5 [0 C5 V
1 b5 W" T9 P$ O& o! Z |