Vue.js 监听属性

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

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

实例

<div id = "computed_props">/ w- o) B9 _# `, F# o p# w3 K
千米 : <input type = "text" v-model = "kilometers">$ \/ }; Q4 E1 l% a+ j
米 : <input type = "text" v-model = "meters">2 _* b/ {% t! S" ?/ c1 g y* j
</div>+ a/ Y( k* K/ G
<p id="info"></p>
" G1 t3 ~& Q& I) f3 Z" R* k
<script type = "text/javascript">9 Y* a0 |2 o3 V4 k) c I$ w* W! a1 I
var vm = new Vue({
7 `5 R0 e2 `4 }8 R$ Z: b7 v
el: '#computed_props',9 m9 C0 O- k% s6 n
data: {6 m7 m1 g) \! X# A$ O& s6 _
kilometers : 0, N1 x. _3 ~9 R, T# P
meters:0! @9 c; T* \- s# S0 M! T8 g
},0 @+ T' P2 a; X% U3 ~5 ?$ _
methods: {8 g/ M+ Y5 n$ i, e7 ^
},$ E a2 E' A5 @$ Y' i
computed :{
- K0 S# o* c0 Q& L) G7 j9 H
},. m' b; |- ?. I# w; S5 q
watch : {' j0 s) a& r- r% J) a0 R* P
kilometers:function(val) {
9 Q; ]2 E) U$ [; t
this.kilometers = val;
+ I$ O. B+ f% X, \3 u
this.meters = val * 1000;+ ` e% B* H& `- ]/ \% j
},+ t+ |& W8 r3 ^* ?& G
meters : function (val) {
5 y! x4 w4 M/ L2 R6 ~
this.kilometers = val/ 1000;
& n. y5 U& z2 a* n- f" c0 L8 M* `
this.meters = val;9 _2 e9 x6 \* ~3 T4 x w& N& S: e/ [
}7 v1 r d3 a3 f3 L
}+ c$ s# `, x" a$ j9 t
});
9 u- ]% w6 L" b
// $watch 是一个实例方法
9 l+ @1 o4 H. _9 u6 G. V- D
vm.$watch('kilometers', function (newValue, oldValue) {4 r( H' k8 B, [. G2 i
// 这个回调将在 vm.kilometers 改变后调用
& i5 w( [; [! d& G! S/ m
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
# D ?: @3 E0 {0 n3 t2 i1 e
})
5 a( _. N( R2 {7 q A9 S/ g
</script>

复制代码

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

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

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

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