Vue.js 监听属性

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

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

实例

<div id = "computed_props">5 ]) S0 J, P' F' J8 T- W3 f# m. k
千米 : <input type = "text" v-model = "kilometers">
# R6 C _9 [2 L1 O# Q
米 : <input type = "text" v-model = "meters">
$ F- d' u7 C1 S9 }
</div>
! n" I! ] d: L
<p id="info"></p>
, V$ Z& i/ I% h6 @* N& ]
<script type = "text/javascript">( {- D1 ?* G, N
var vm = new Vue({8 h8 O* D7 t1 q8 w
el: '#computed_props',9 L7 K% _* q5 o% C3 I
data: {
; o# ^% o; f0 v0 d9 O7 U. ~; G7 C
kilometers : 0,7 a# ^- A7 s3 O5 h$ o, S3 |7 f4 ^
meters:0: H$ l- h. }$ n* G
},
B; K7 _! C$ x# I$ |
methods: {
( ~/ d3 A% g- [ I3 j
},
+ J6 r W; \7 j4 b
computed :{
; @% d; O9 i0 o: q2 c
},2 Z% ] a5 K4 G7 Y6 Y
watch : {+ `2 |0 m0 h6 m7 q6 I$ v
kilometers:function(val) {/ s& x" f1 U& B- u. s
this.kilometers = val;
: d* n: e+ p2 b8 b6 D% @$ Q
this.meters = val * 1000;! s) g& u, C# C% y" F8 H( }
},3 @2 s: c2 v3 }3 ^5 U' B% V4 _
meters : function (val) {7 C7 v- v! m9 v# v- Z
this.kilometers = val/ 1000;
8 B# o$ r# e) _" O& B3 y
this.meters = val;
% {( x7 ]( I- p; `( l# a6 D
}, [8 X* _. {" {& w+ m
}
$ U% p! u. Q# e' d4 Y% S% A: }1 o a
});
! ^9 d, {! S" X
// $watch 是一个实例方法
. k' A& o% l- c& o/ T7 c# N# g
vm.$watch('kilometers', function (newValue, oldValue) {
! j3 U& Z# l; r
// 这个回调将在 vm.kilometers 改变后调用7 z1 p8 x. e- c4 O# s
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;# Q; ]+ C' s+ X" v1 p* V
})
2 c0 ]1 z1 m8 ^) d; ?
</script>

复制代码

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

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

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

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