Vue.js 监听属性

admin · 发表于 2018-7-4 11:05:03

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

实例

<div id = "computed_props">0 `4 r6 n& v! O+ ?
千米 : <input type = "text" v-model = "kilometers"># F% J8 m) i% P2 \. ?
米 : <input type = "text" v-model = "meters">
% V$ B' x: g1 ]' c
</div>+ W1 A2 b3 k3 C: \8 x* _- j- z
<p id="info"></p>5 J$ a5 l( a4 \) g! W3 H
<script type = "text/javascript">
: X- l4 T# A- T: C
var vm = new Vue({1 h; P: U r2 s$ G' k4 j" \: I. s8 s
el: '#computed_props',
7 J( G# r" M% p$ n4 G
data: {7 a% L8 p9 S4 t$ B) a
kilometers : 0, N0 H" Y9 J& L7 l6 I( K& p# q8 a
meters:0
/ `! z- R" d. ^3 B
},
~' y9 E+ C# d/ q* Q9 R; v9 R
methods: { B4 P" s+ T4 O; K
},3 C0 h( y4 ?7 V
computed :{$ b- Q5 J/ i- V$ N) `$ P
},
, G) k: h5 V t1 j; ]" _. u$ Z
watch : {& s; Q$ W0 R- N, Y6 c
kilometers:function(val) {4 g( A3 a, Q u6 H7 {- M
this.kilometers = val;! H1 h* z. ^& }
this.meters = val * 1000;% r# P+ M% e5 T _7 z
},
6 o7 Q* u- J H1 G; L, ]$ j$ n
meters : function (val) {5 r; l9 }! F5 K% B7 T, j
this.kilometers = val/ 1000;
" [8 A/ G6 M+ o2 C/ ?. [
this.meters = val;/ y* K v0 L7 p( j
}
7 a( d4 J% j% V: l' t9 F4 D
}' }: M5 O0 p4 r1 i! ^+ e
});/ x0 f8 D& |/ w- Z' v: h- S
// $watch 是一个实例方法
9 g6 _4 u1 M0 ~5 f6 B
vm.$watch('kilometers', function (newValue, oldValue) {( w# o6 f2 R6 h# T
// 这个回调将在 vm.kilometers 改变后调用1 f% g3 ?. ~7 K' E7 j# V) L
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;7 n2 D: ]) l5 b7 \
}); J; {1 Z2 n. Z6 z: P9 I5 J3 L
</script>

复制代码

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

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

帐号		自动登录	找回密码
密码			立即注册

[Vue.js] Vue.js 监听属性