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

<div id = "computed_props">
8 Z5 G* W0 U9 h( I
千米 : <input type = "text" v-model = "kilometers">) L/ D0 z3 A0 Z4 S* z4 h* d% ~
米 : <input type = "text" v-model = "meters">
% ^0 A0 `2 \7 E4 G& @: P
</div>
; L! J2 g: X z+ G$ ]9 e7 ~9 p
<p id="info"></p>
* o( {0 r% b( ^/ _6 X( k. v
<script type = "text/javascript">
4 \% j, i. x a; L6 p) U& o1 w; _
var vm = new Vue({5 y; d* v$ _8 G$ R
el: '#computed_props',
! {9 ^. \/ ^$ b, J
data: {
9 S# B4 s# @8 U# Z5 {: }+ [
kilometers : 0,, {# u5 L7 u4 ~" }5 c) ~$ u
meters:0 K- ]! K' N% [
},
0 L$ w$ N4 H. {
methods: {
, Z+ G; U5 {9 t6 r
},: ~+ K" W, S6 h7 E; r/ J
computed :{
6 K) e0 a+ c5 F
},
! I5 `- D5 N6 j) Z8 f6 b! ?( V$ s
watch : {
: U, K' C3 E* n' {9 W7 V3 l5 n3 C
kilometers:function(val) {7 T, P5 Q9 f' A
this.kilometers = val;2 q2 `! Z+ U( K7 p5 M3 l9 Y; n4 y
this.meters = val * 1000;
6 z- w w9 L* N# d" H
},
, z: G( H4 P+ j
meters : function (val) {
1 i0 ?* {; L0 ~0 t
this.kilometers = val/ 1000;
, b6 V+ y+ M8 V! H ], I1 @
this.meters = val;* i+ P, Q4 l/ z3 t/ p7 X( Q
}
2 w9 a- `: ^: Z! }1 f* I, z
}
5 k$ |! ~+ X! {2 z
});; [- P s `/ h4 q' C
// $watch 是一个实例方法; |7 D4 _7 b' `1 h6 t" k
vm.$watch('kilometers', function (newValue, oldValue) {
& c U x3 f4 r( R& F
// 这个回调将在 vm.kilometers 改变后调用
" w Z3 \, Z8 e. a& O- p, a' y
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
/ S; s, a9 y% ~7 x7 j0 X c# X7 b
}); _' Z" j4 U E, \1 V2 G
</script>

复制代码