Vue.js 监听属性 - cncml手绘网

<div id = "computed_props">8 s9 Q( O' u% l9 s: @/ N& P' n
千米 : <input type = "text" v-model = "kilometers">
5 E& ]2 H% Q- Z7 f5 e; [5 I/ M
米 : <input type = "text" v-model = "meters">7 ?' C: O, ?' }
</div>: {' H- R$ B/ l
<p id="info"></p>7 Z/ d$ w: e- }% v$ s
<script type = "text/javascript">. E- l- O: K2 d. K" i
var vm = new Vue({7 P* i) ?1 ]/ B) j" ~" G1 P
el: '#computed_props',+ j8 ?" h# Y( s* Y4 X
data: {
! j- |* o7 m h
kilometers : 0,
% Y( z! E" p( L) Z# K3 b
meters:0
2 j% }8 }5 Y' r' J
},: K1 ^# [) K) a0 C8 M& G
methods: {! e; J" g$ G4 t% m+ d; g
},4 @) b9 E0 X5 q$ Q& k
computed :{% g5 Y% ^- O9 m
},# w. x! U( {3 @ C/ b0 z
watch : {+ O: z; T4 f6 h0 [
kilometers:function(val) {8 H ?7 U) W; o9 S
this.kilometers = val;- E9 u) e7 \# u% K
this.meters = val * 1000;
1 R; R- u) ^* e( S
},
: a2 ^" }2 t' |4 C- W. A
meters : function (val) {% |& U/ I |1 d W; F1 P
this.kilometers = val/ 1000;
- s6 y% p. G. z
this.meters = val;/ M- y# o j4 }/ |2 N
}: ~5 M7 z% n* ]# ]8 _% U
}
r2 y/ k! {% s% {& W
});
) c0 o, Z' u1 z0 G( @
// $watch 是一个实例方法6 E+ U2 u( S ^& t8 a) G
vm.$watch('kilometers', function (newValue, oldValue) {4 Y& g0 k* F# O) @7 X
// 这个回调将在 vm.kilometers 改变后调用
" o3 Z# u# R5 e4 ~% o8 d
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
$ |5 [1 e( n8 O9 q m7 F& @
})
0 z& v! s$ [1 U) ]! p0 f
</script>

复制代码