Vue.js 监听属性

admin

* J- c. w4 |" x) V

本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:

实例

1. <div id = "computed_props">
   + `2 _% t) e- P7 F+ a2 C! y: T
2.     千米 : <input type = "text" v-model = "kilometers">
   
3.     米 : <input type = "text" v-model = "meters">
   
4. </div>
   
5. <p id="info"></p>
   # O3 }- I* Q" k- \  {
6. <script type = "text/javascript">
   
7.     var vm = new Vue({
   2 {4 c' B7 n( L% z5 ^/ z8 X6 L
8.     el: '#computed_props',
   
9.     data: {
   & M% W& v( P4 O, M
10.         kilometers : 0,
    : J7 C9 g) X& I: ]4 S, P- x0 |/ x6 J1 x
11.         meters:0
    7 I( o* h, D0 ^* Y- t4 B
12.     },
    5 F0 @* a% s( e
13.     methods: {
    3 ?* I  |! {4 {/ R4 q+ F1 V
14.     },
    * O$ K7 `7 U! I4 e. P: y' C+ _2 ?
15.     computed :{
    ' [) c2 J7 h/ @
16.     },
    
17.     watch : {
    
18.         kilometers:function(val) {
    
19.             this.kilometers = val;
    . e! v- x. Z7 ~) |3 W3 E
20.             this.meters = val * 1000;
    
21.         },
    
22.         meters : function (val) {
    
23.             this.kilometers = val/ 1000;
    1 R1 q4 w  J7 B; B: O" A+ i/ t
24.             this.meters = val;
    
25.         }
    : f2 M% @& L2 H' [6 ^' ^
26.     }
    8 q* K; |6 a1 Y6 V! `* ]( z; F
27.     });
    1 w! z) L% G5 X/ J$ l/ X
28.     // $watch 是一个实例方法
    ) h" Y7 k5 x1 L$ S; D/ t
29.     vm.$watch('kilometers', function (newValue, oldValue) {
    
30.     // 这个回调将在 vm.kilometers 改变后调用
    $ K- Z. n) G6 h
31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    / Q; x% e3 B% m  Q, V5 A0 z3 N+ f
32. })
    
33. </script>

复制代码

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

& v/ g3 u. Y0 ]% o, n3 w0 ~( t3 R