Vue.js 监听属性

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

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

实例

<div id = "computed_props">+ N1 ?" K, t# U. z2 @2 r
千米 : <input type = "text" v-model = "kilometers">
% A! g0 f# Y) H" f
米 : <input type = "text" v-model = "meters">
4 |$ Z! V7 T( x5 q6 Q* E
</div>8 {, L6 s; ]+ w
<p id="info"></p>1 e9 ~8 h% l" K
<script type = "text/javascript">
) s8 x N G+ d9 D6 P
var vm = new Vue({/ e3 t# b+ }, i% m
el: '#computed_props',2 {- l, d8 i6 q" f/ d
data: {# ^) ~2 e8 {: J6 d9 F0 U
kilometers : 0,
% W* C3 z) M% f
meters:00 ^7 i8 G* d% l9 T
},+ K& |- Y) d1 q+ ^: Z
methods: {7 `. t0 ^) F( b0 s" w% M
},1 c: G- j( C: \, b& S/ a4 C
computed :{
$ M& G/ d( x, M( T' [
},
$ P# z+ q. X, k& n J! v2 t
watch : {
9 L: _: b5 S/ b5 J2 s
kilometers:function(val) {8 `5 ~! s% | p0 w$ ]+ }! ]( A9 H
this.kilometers = val;
1 H. Q' F2 A4 v' F3 X: {
this.meters = val * 1000;2 D' H- i1 y3 | u% x7 {
},
meters : function (val) {% U7 c' D6 E& P+ p' c9 n6 A
this.kilometers = val/ 1000;5 m8 A6 F& Q7 f) U V% z& P/ E; X0 \
this.meters = val;
8 u3 U5 W3 T7 F( s# G! R7 E
}
; t- q3 @+ y1 R! g9 S: Z
}9 S% ^7 Y& q7 R- a- U' X6 w) I
});" `4 y9 Q2 F+ }+ p
// $watch 是一个实例方法' O0 \' i. U \ d6 K
vm.$watch('kilometers', function (newValue, oldValue) {. G* |1 X4 t5 S: u. W
// 这个回调将在 vm.kilometers 改变后调用6 r3 @/ @$ k% m7 H; y" ^* l
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
N) ~9 X6 O, \' E) `+ u/ ?
}): S" \& h/ g( t( Y( z
</script>

复制代码

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

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

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

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