Vue.js 监听属性

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

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

实例

<div id = "computed_props">7 ]# A2 C# N8 t
千米 : <input type = "text" v-model = "kilometers">
* W' E$ k! x, P$ R3 a, s6 f# l
米 : <input type = "text" v-model = "meters">
$ ~( l8 ?1 T6 X& z: X; K
</div>" m' z3 \+ F; Y* n8 T6 Z
<p id="info"></p>
- A6 ~& Q& D" @6 q: A- f) m" I# v
<script type = "text/javascript">; v" F6 g1 E0 ?" i n$ ] `
var vm = new Vue({) V. `! z/ h2 ^: ?$ u
el: '#computed_props',
9 t! |+ F$ a# O! L- g, W; ^, O1 x4 J
data: {
& l0 ]+ R$ D; T
kilometers : 0,
' F: k2 M# S1 [
meters:01 |( H1 Q8 j* X
},0 n4 b; O% `! ^5 u) D9 S- I) Y
methods: {" }" E* s5 y' a# N! a6 Z
},5 c, ]3 E' B& J. S! j* b! ~' D
computed :{
" b) ?2 R, m9 U' q: q: d9 h/ k
},* t; I% v+ p9 D% D+ D1 a
watch : {4 U. V8 ]& k/ ?" N1 Y- s* ~
kilometers:function(val) {' e3 m+ l9 x7 P
this.kilometers = val;1 U0 b' T' |7 y$ G1 u
this.meters = val * 1000;. N7 w5 |. b0 I% o3 I
},
! o1 c, o/ w4 m
meters : function (val) {3 q5 C. m# o# |8 I& }
this.kilometers = val/ 1000;5 @- Q- V/ p0 R
this.meters = val;
4 w& k6 N+ }7 N6 I. F) ^
}
! ]0 C! ?& Q0 X) s" s! _/ n
}
: C8 j d5 v+ p. ~. g' B) E
});
9 Q7 m I# Q) z& o( V
// $watch 是一个实例方法. P$ Y. R) `) e: p3 m
vm.$watch('kilometers', function (newValue, oldValue) {
, M F* H# w/ l, J1 L, P& {1 e
// 这个回调将在 vm.kilometers 改变后调用# @, I1 O7 F* {. S, g7 a+ c
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
% N; h6 ?! c% {* n
})
! w& h( t0 E U5 G% R9 T! }( G, y
</script>

复制代码

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

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

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

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