Vue.js 监听属性

admin

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

实例

1. <div id = "computed_props">
   
2.     千米 : <input type = "text" v-model = "kilometers">
   # g  `( j, t& F) W4 [
3.     米 : <input type = "text" v-model = "meters">
   $ [5 K( r  }" {
4. </div>
   5 Q; ]5 ]8 X! H& I& K& G% n% a
5. <p id="info"></p>
   8 H3 W( a. G1 n0 C
6. <script type = "text/javascript">
   ' I% P3 @) N) ?
7.     var vm = new Vue({
   0 P. W/ z" `" a$ o7 h( j6 S
8.     el: '#computed_props',
   . i/ U6 [+ e7 f) o5 S# g7 z
9.     data: {
   / s- [6 f$ V2 l9 z: i, d& t. U
10.         kilometers : 0,
    % G% B6 m6 C: @
11.         meters:0
    . F% A9 K$ S- N9 v
12.     },
    
13.     methods: {
    , o, F3 o  ~! h2 G( q' v
14.     },
    / S% A) y  P4 K7 g
15.     computed :{
    . Z' x) C+ h3 I5 R# Z
16.     },
    
17.     watch : {
    
18.         kilometers:function(val) {
    . J+ ~) a( E" w* Z
19.             this.kilometers = val;
    ; B, `4 n% T9 m& m
20.             this.meters = val * 1000;
    
21.         },
    
22.         meters : function (val) {
    
23.             this.kilometers = val/ 1000;
    
24.             this.meters = val;
    7 P& h' U4 V( C! j  l
25.         }
    3 ^! V5 c/ ^# t% c' z
26.     }
    
27.     });
    
28.     // $watch 是一个实例方法
    
29.     vm.$watch('kilometers', function (newValue, oldValue) {
    5 j' O: W9 z1 }, P$ G% m/ z
30.     // 这个回调将在 vm.kilometers 改变后调用
    
31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    9 _0 Y7 n7 {+ e1 Y
32. })
    . W5 J/ M4 H- n1 V; b* s
33. </script>

复制代码

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

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

; n6 N3 |; L/ v# [3 K
' g4 \, Q( s0 L0 e" {3 E: q
9 d2 Q  V3 M& Y4 b+ m& |