Vue.js 监听属性

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

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

实例

<div id = "computed_props">
0 Q7 X! ?1 v; u5 V0 J9 s1 ^2 \5 U Z
千米 : <input type = "text" v-model = "kilometers">3 F# X' `" s4 m+ }! ^
米 : <input type = "text" v-model = "meters">
</div>
6 b9 g/ s8 q: ?$ k2 j; U
<p id="info"></p>, {# p4 s2 S5 h `1 p$ U. m( R
<script type = "text/javascript">
, \4 p- T% I) X7 r+ o8 Y, ^
var vm = new Vue({3 a- y K( O' Q8 z( |# h" I- i0 z! h3 l
el: '#computed_props',% e: ?) E; @' I/ X1 }: v
data: {
; {# K% l5 O) J+ D/ [+ I, R. t" h& t
kilometers : 0,
! B1 b0 a) P$ G7 E0 D8 E4 l
meters:0
$ P5 g; y8 e+ w
},: o; V0 P: P) F1 i Y8 ^) I
methods: {
5 t" D$ d9 f J4 b+ v- l6 b
},2 R# w5 |7 ^9 L! t' C9 _- |8 f3 K
computed :{* u/ h6 S9 \1 o5 t. `' {
},# k5 D/ Z; o( o5 X
watch : {
% n/ T3 g! L# _( j& N
kilometers:function(val) {' k1 `) r$ N0 n' W
this.kilometers = val;- \' `6 O' Q8 i7 c
this.meters = val * 1000;0 `3 {4 e: w5 l% k" J f) L: m
},: y) R) B) N: V! S! b% Q6 @
meters : function (val) {
5 W9 m1 I+ n" ~- X
this.kilometers = val/ 1000;
% d2 p) o; |. w4 M6 s
this.meters = val;4 J `3 C" z; t7 t
}9 J# X7 m& I" h" l2 u
}
! h$ x; I' b* P- j8 s' w% T
});( `5 v/ a2 e9 [- ?
// $watch 是一个实例方法0 U- S& d4 R+ t* M% z6 T
vm.$watch('kilometers', function (newValue, oldValue) {
6 z% o# s8 E3 d+ H
// 这个回调将在 vm.kilometers 改变后调用
: I1 ?8 K3 v U0 a) e/ P5 z1 K
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;5 c8 x; ]+ V+ t' ^/ g/ Y1 V
})
0 C d4 H! ~, n! {* H, L" D5 U' A
</script>

复制代码

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

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

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

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