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

<div id = "computed_props">& ~' \3 H! B4 e5 s6 f( d3 b
千米 : <input type = "text" v-model = "kilometers">5 M5 b! u% J V. O- K' T$ T
米 : <input type = "text" v-model = "meters"># Q. C4 R$ s' Z% }
</div>7 ?" y" m0 w( ^4 ^9 c
<p id="info"></p>, K, B( `4 }" L# y/ [
<script type = "text/javascript">. Q1 n! Z7 {# c2 z
var vm = new Vue({
, q# _ D Y6 M3 t+ E
el: '#computed_props',) |7 r4 \+ q' a0 a
data: {
, [# ?+ e" h- c! m6 A) p
kilometers : 0,& R- l3 a! C8 D- K3 A7 a1 p
meters:0* s# g7 Z& T, g4 b* `# f
},) \1 b+ C# E- b
methods: {. c2 b) y: K# _; Q
},
1 v0 V6 w% [3 p: q5 E: F$ ~
computed :{6 b) x( s( s7 d" ?! Y5 U
},
4 G+ q& R- ^. L. u+ B: B
watch : {
+ h% w I+ Z O. n+ R3 s
kilometers:function(val) {3 n; R: A! [/ G' w- J
this.kilometers = val;
$ q! V# N, r( l# j1 Q+ k2 M
this.meters = val * 1000;, ^" Q$ u; ~* f
},* `. m5 h5 w3 a
meters : function (val) {
: {1 O% i# w' {9 l0 v
this.kilometers = val/ 1000;1 N1 d: V8 N- J! [$ u( e& R j
this.meters = val;+ m4 E; N' t# T
}
: x+ F! G$ W6 P) T& ?) b
}) u. a) n+ P1 W$ p1 d( r/ g+ H2 \
});
: }3 L! H5 v% D9 t( H& P5 w1 r
// $watch 是一个实例方法 T2 U& G9 z; t/ k7 b: j
vm.$watch('kilometers', function (newValue, oldValue) {# {3 T% ~( V8 `5 {5 H# ~; \
// 这个回调将在 vm.kilometers 改变后调用
& ~; d0 p9 N2 e2 p
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
' m3 ~/ l R! k& J! J
})& _ C7 x0 M& s4 C- d6 h6 r, U
</script>

复制代码