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

<div id = "computed_props">
9 ~) ?9 ^2 `0 f6 S
千米 : <input type = "text" v-model = "kilometers">
' b4 n/ t0 ^/ i! S. Z* W- c
米 : <input type = "text" v-model = "meters">/ ?7 |7 `% Q# j/ _: `) I
</div>8 k, i$ r1 c% t5 Y1 a+ S
<p id="info"></p>
4 I! g6 f3 N0 z6 ^5 R. @
<script type = "text/javascript">
$ P' m0 T. @' d, k2 J' l
var vm = new Vue({. M( r& |, v. v" @; J. m8 d. B& J
el: '#computed_props',
7 c, V9 `! N2 g. c) ^# `0 l0 y
data: {3 @ e6 ]# k5 U8 Q, L
kilometers : 0,& F% }% k. y: ^/ p- ?/ ?( z9 O# c: u1 t
meters:0
) _( r2 m8 r& ~ `
},
5 `7 j( D X' e' z1 `
methods: {- H/ z; e) n7 _: D- y
},
1 F5 j+ F) U# C( [3 W7 N0 c
computed :{( i. P% \2 q' Q# h. K' v
},
6 V0 v$ r. e. W' x* d; }, `8 N% g
watch : {
, t, y, d/ G8 L
kilometers:function(val) {! l4 g: U! f. K2 L" @3 x
this.kilometers = val;
; c1 g b9 R1 ], W" Q" B9 M
this.meters = val * 1000;
1 {$ d2 `6 X' S- y' s* I
},
, J; a$ I7 s( g! {
meters : function (val) {9 p' v: T5 Z V. I7 _) a
this.kilometers = val/ 1000;/ X A. B6 o8 I$ s9 K
this.meters = val;
9 t8 H8 R/ ]$ ]+ p
}
0 H L6 P- C, p$ i
}. B( h( x- ?0 W# g
});
/ C, X! ?' m: ~4 R, R
// $watch 是一个实例方法
0 H6 L: h, r) |4 W6 r
vm.$watch('kilometers', function (newValue, oldValue) {
% h: Q0 _, b. G$ r
// 这个回调将在 vm.kilometers 改变后调用% D6 b7 {4 ^& b) _4 `5 Z7 D
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
& }0 b9 k6 n: o; E
})
4 ^* c+ v9 [* Q8 w+ A; \
</script>

复制代码