Vue.js 监听属性

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

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

实例

<div id = "computed_props">2 ^6 h1 t7 `" L& Y; [3 R. S
千米 : <input type = "text" v-model = "kilometers">
6 D W. U* s4 ~- |- U
米 : <input type = "text" v-model = "meters">+ q9 w3 u; c; e. t9 N
</div>5 ^1 F6 F8 k+ @8 y" H. f9 X
<p id="info"></p>
" ]3 E M* O& B# k" a4 Q
<script type = "text/javascript"># C, G9 ?1 G4 P( a; a6 U' i5 `
var vm = new Vue({& Z8 ]6 Z, ~: N( w. M
el: '#computed_props',/ e( w* i; }. q# r4 Z5 G$ K
data: {
8 x. c9 c5 s3 Q6 _0 }2 c4 O
kilometers : 0,+ U" \0 e$ {& l- _
meters:03 w% }. w9 e6 F R' p4 N$ _
},
( d+ z! ?2 w' j& Z' V$ `
methods: {& V" ~6 e6 `% V- I5 ]5 C
},2 w, L* i9 G. w: h9 I/ [# a/ M
computed :{& H( a8 Y* ]7 m: I: l, S9 ?5 X0 N
},* t3 r, A4 ]$ a# d+ O$ k$ h! M
watch : {% t* q: x' W; S0 p$ ^. H
kilometers:function(val) {! A; m$ C& |) J T5 c C2 ^2 _
this.kilometers = val;
" B. d9 w4 A' n# W: y& r
this.meters = val * 1000;
; z& ~6 O! }+ o+ C
},' Z* b- b% e T, E P
meters : function (val) {
$ f S' D q- ~( P6 Z& F
this.kilometers = val/ 1000;: J7 y: |6 b/ b/ q/ V- ?
this.meters = val;
; G7 F2 D* G; H( y7 L
}
2 K- m: l" p, h4 x6 E2 Q% Z' n
}6 m/ @: k: x1 K) {/ [: }0 @, F
});- u2 L$ q6 T0 T8 P& e& t) U
// $watch 是一个实例方法
( D w4 g& N9 \/ n
vm.$watch('kilometers', function (newValue, oldValue) {$ b0 \! s0 @/ D& \& M v! w
// 这个回调将在 vm.kilometers 改变后调用- D X5 W+ X5 v; P4 ~" o! p
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
! Q: [& d8 A5 W z
})
4 s0 J; ^2 [7 b( P) G" K) Z, L
</script>

复制代码

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

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

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

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