Vue.js 监听属性

admin

9 h( Y7 \: F; k; r

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

实例
# O, T% p/ W& u

1. <div id = "computed_props">
   
2.     千米 : <input type = "text" v-model = "kilometers">
   $ v( J/ Z" J% @) Q& r! A
3.     米 : <input type = "text" v-model = "meters">
   + ?; \# R8 r# e4 [
4. </div>
   ( j2 n9 N' s; L/ ?4 b. {9 c- S* L
5. <p id="info"></p>
   7 `4 n; j) L9 ~! \9 {
6. <script type = "text/javascript">
   
7.     var vm = new Vue({
   
8.     el: '#computed_props',
   
9.     data: {
   
10.         kilometers : 0,
    
11.         meters:0
    & _" _, u  y* S1 ^6 W9 r
12.     },
    4 H8 p, H' D) k
13.     methods: {
    
14.     },
    
15.     computed :{
    3 f3 e% R7 \  I5 {0 n
16.     },
    + S6 O$ @# B/ I- K
17.     watch : {
    
18.         kilometers:function(val) {
    " I" d; M; N; E& B( |
19.             this.kilometers = val;
    
20.             this.meters = val * 1000;
    5 p2 F$ K; x2 b$ y
21.         },
    ( |+ i% F  P$ @3 A' e, B, e  G
22.         meters : function (val) {
    
23.             this.kilometers = val/ 1000;
    : c5 h1 D# ~  m" ~: ~
24.             this.meters = val;
    
25.         }
    $ D; g1 @7 @2 U5 }# J7 V
26.     }
    9 r: B1 a' v1 X& f
27.     });
    5 ]) u* Z& o, M+ E4 ^0 Z) C  s
28.     // $watch 是一个实例方法
    
29.     vm.$watch('kilometers', function (newValue, oldValue) {
    
30.     // 这个回调将在 vm.kilometers 改变后调用
    ! ?1 j" J- Y  {$ A! |1 c% [
31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    
32. })
    2 `* S% P7 M, j8 v! P
33. </script>

复制代码

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

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

7 k/ T. [1 a; J5 d- }5 P

' |. @, D( J3 Q
/ {0 A4 M5 g% j" M