Vue.js 监听属性

admin

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

实例
9 ?4 S" a$ P/ v1 N8 h
1 y  X: C/ N6 t+ d

1. <div id = "computed_props">
   
2.     千米 : <input type = "text" v-model = "kilometers">
   
3.     米 : <input type = "text" v-model = "meters">
   
4. </div>
   & L/ h7 v2 U5 j- c6 ]9 q
5. <p id="info"></p>
   
6. <script type = "text/javascript">
   
7.     var vm = new Vue({
   9 l6 n, G# c! ^& G2 U
8.     el: '#computed_props',
   3 n. j" P# V( s! U  I- b$ `2 A
9.     data: {
   
10.         kilometers : 0,
    
11.         meters:0
    - ]) ?4 }2 |5 i0 H( R9 ~' c8 c  G% ]
12.     },
    3 {' a  c# B6 \3 M: \+ @- u
13.     methods: {
    
14.     },
    ; i; E7 j- ]0 p6 O/ G0 @" F
15.     computed :{
    1 ?# i' u5 D" T; L4 G
16.     },
    
17.     watch : {
    + ~# e+ S# g" {7 C6 c
18.         kilometers:function(val) {
    
19.             this.kilometers = val;
    * A* l/ w  M: M4 z( M5 ?
20.             this.meters = val * 1000;
    ) H) Y: _+ f+ D
21.         },
    
22.         meters : function (val) {
    
23.             this.kilometers = val/ 1000;
    $ P; ?" V" X' A+ {& i& \
24.             this.meters = val;
    , i4 Z; A/ v1 f/ i/ Q$ \& m
25.         }
    - ]9 [" M4 g  ~, r& K5 N
26.     }
    
27.     });
    
28.     // $watch 是一个实例方法
    ! D8 ^/ X% z7 j) G1 U8 |7 {
29.     vm.$watch('kilometers', function (newValue, oldValue) {
    
30.     // 这个回调将在 vm.kilometers 改变后调用
    ( q! R) V+ O. [3 `
31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    4 Y+ h/ t) F9 n- G
32. })
    
33. </script>

复制代码

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

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

' N- n6 T% u4 T, j5 h' G1 `


0 O8 c/ z! r  _6 `9 ?! r