Vue.js 监听属性

admin

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

实例

1. <div id = "computed_props">
   ' [! E& z! |$ u" K
2.     千米 : <input type = "text" v-model = "kilometers">
   
3.     米 : <input type = "text" v-model = "meters">
   ) U6 l8 j! d. x
4. </div>
   , K- u7 h4 v2 E: l$ i' c( x2 [; b
5. <p id="info"></p>
   6 y/ \7 S* r# B: D$ i
6. <script type = "text/javascript">
   ; m3 H4 G$ V; u$ }
7.     var vm = new Vue({
   9 m4 \$ B* |9 D' C: Z
8.     el: '#computed_props',
   
9.     data: {
   * b: @- _/ ?; z/ S; G3 p) g' c2 x
10.         kilometers : 0,
    3 y* ~" j5 ~: X; K' ~5 B1 h
11.         meters:0
    ! P4 |0 B3 s( J( _
12.     },
    8 ]( D5 T: f( e0 V
13.     methods: {
    6 s: @/ s# M8 D1 n  |! i: x
14.     },
    6 d: d( G! J" {5 A4 c
15.     computed :{
    ( x# j9 W5 W  P# U# A# i
16.     },
      u6 B8 |6 r+ G2 z7 F. a
17.     watch : {
    
18.         kilometers:function(val) {
    ; J! ~& G! h7 [+ Z1 r) l0 r
19.             this.kilometers = val;
    
20.             this.meters = val * 1000;
    
21.         },
    
22.         meters : function (val) {
    8 V  I( k: P+ i1 q4 S0 D2 r
23.             this.kilometers = val/ 1000;
    
24.             this.meters = val;
    
25.         }
    
26.     }
    ( `  X# Z. d- k7 f6 M% a6 B- Y
27.     });
    
28.     // $watch 是一个实例方法
    + W9 h. j1 c+ q0 ?, k
29.     vm.$watch('kilometers', function (newValue, oldValue) {
    
30.     // 这个回调将在 vm.kilometers 改变后调用
    9 Y" u$ [" D3 ?: }) Q0 W3 {
31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    
32. })
    
33. </script>

复制代码

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

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