& [2 d6 R1 r n/ S6 l+ A$ D( X
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例4 s: M7 {, S) a1 S
3 l- Y8 \2 e1 O9 Q) ?
- <div id = "computed_props">
5 g5 I0 b" g; W - 千米 : <input type = "text" v-model = "kilometers">2 x# o8 G9 Z0 N8 X& l
- 米 : <input type = "text" v-model = "meters">' n. a: j; h/ k& O! c& p# h3 V+ q
- </div>
$ E' X( w @( R$ M$ j - <p id="info"></p>
! e ^' z5 E8 V - <script type = "text/javascript">. C j" Z) m% Q- [4 c1 ~" x0 U
- var vm = new Vue({
& x L/ ]3 B5 F' f: X- t. N - el: '#computed_props',
- j o5 d3 i( W/ G - data: {) g2 ?/ b1 K8 X2 N6 `
- kilometers : 0,
; f% ~0 x# W3 W0 k - meters:0' q- R3 z$ f2 f5 ~
- },
2 }1 b6 {: D; c! |( o5 N - methods: {2 u+ A0 b# D6 q! s
- },! c y s/ r2 P7 k
- computed :{( n2 T2 C3 F& C! t, L5 `. w- H% J9 |7 t
- },* [1 }: e* n1 \8 ?: s
- watch : {; A# R# ]0 ~" g' ^$ u5 }+ C, j
- kilometers:function(val) {0 x7 {) _9 q6 y$ l8 Q8 R" T* N
- this.kilometers = val;
, k6 E& U2 n: [# Y+ C - this.meters = val * 1000;- m0 C) X5 O4 g4 f& ~4 a9 Y
- },
9 u# g& P$ |. y% x" Z" D# ^ - meters : function (val) {3 S- P# c3 Q( \: M+ J7 M9 @7 _0 \& R
- this.kilometers = val/ 1000;; v H1 K4 w! ]" N5 D- V' |
- this.meters = val;; X! N( m7 C4 p6 d
- }) U$ U% b4 n3 m* ^
- }4 p, X; D/ V2 s1 I) s/ ^& g( q! Z
- });
5 K( J7 g- }& O. w' ~ J3 l% ]! y, L - // $watch 是一个实例方法
I1 H) }1 a5 O - vm.$watch('kilometers', function (newValue, oldValue) {
4 ]* C% j+ D7 P- h# } - // 这个回调将在 vm.kilometers 改变后调用
" F0 ~0 X4 Q8 T - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
9 i+ x2 B" o0 A9 ^$ o7 [( z2 n - })
# r" r1 f: g3 h& t - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
- m9 v o ~3 a; T- y) W
0 e+ `7 B2 `, t$ x& B6 p2 c; U8 u& K- u( Y# C
8 Z0 O9 W5 V3 ]7 v1 e
|