Vue.js 监听属性

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

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

实例

<div id = "computed_props">" k9 Z9 o6 }& p3 O
千米 : <input type = "text" v-model = "kilometers">; C4 D I( ?/ p5 T) I
米 : <input type = "text" v-model = "meters">5 V. x$ ]2 m) X5 y# A* K' l8 ~
</div>
( P/ w- q7 ~& N9 K5 k
<p id="info"></p>
0 O" k1 V: u) L! B j
<script type = "text/javascript">
6 F, N, G* L d6 H& D
var vm = new Vue({
5 t7 s. H8 p$ ?$ U% w
el: '#computed_props', U1 K$ @+ t$ ]3 Z; G2 \1 p0 U( y
data: {3 G+ ~2 X6 d- R: a4 _* {+ D
kilometers : 0,( }6 o! R5 r% z; k" D. g$ u' c
meters:0
) x0 d0 V. N3 U9 ?6 \
},6 U! m0 c4 I, W7 H' ?
methods: {+ ^8 Y' J7 X5 }) R" i+ f) {
},, {8 g( m0 _& g& A
computed :{8 u" n' D) L6 W0 L
},
: b6 H0 l @& n I& s
watch : {
% A. L' A( P& x/ u8 V) w( F
kilometers:function(val) {
$ w9 O/ m; B7 c, v, G# G2 I9 F r
this.kilometers = val;
2 Y- T' }3 Y4 u5 r
this.meters = val * 1000;5 Y0 b% v: u$ `' a" o5 e
},4 X2 i* I0 ~% n: h7 @' S, U
meters : function (val) {6 `0 _$ u/ x( D' }: a; ]
this.kilometers = val/ 1000;9 Y% ` i; N, z6 {
this.meters = val;# K7 z4 }; P& @* w" [
}0 {- @/ x0 v* G; D
}
- u" g8 m$ V" L2 B
});
5 D- S# E R* s
// $watch 是一个实例方法: l) W$ |+ Q8 u- v4 O& Z, s
vm.$watch('kilometers', function (newValue, oldValue) {
' d4 i- X+ g+ J; ^+ i4 l3 h j
// 这个回调将在 vm.kilometers 改变后调用
0 ~6 A# v! ^' _1 m( ^
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
3 s5 B2 \5 X9 y
})7 V. n9 V3 d0 {
</script>

复制代码

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

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

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

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