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

<div id = "computed_props">
' c1 n1 R% N% g) `6 j
千米 : <input type = "text" v-model = "kilometers">
/ E& F; ?( S7 z4 ^7 _' c3 Z
米 : <input type = "text" v-model = "meters">8 H& }- T( g) C7 N* B2 F" T
</div>0 u0 t$ d6 E( f
<p id="info"></p>
1 r. y" i- C- r
<script type = "text/javascript">
( `6 I- K& @* B9 Z' I7 r
var vm = new Vue({ H' b5 z' P( U" O& w
el: '#computed_props',* u( P5 w3 e4 [# C
data: {+ Z, E& _5 B( ^0 E
kilometers : 0,6 o; w& M. r% x1 ?! B2 D
meters:0
! P. A- n' ^$ U" `) J6 H
},* N5 P; j4 S5 P% B2 M
methods: {
% S* Z/ ^. d9 K2 J( Z
},
: j( }: M- Z( j: z% `! O
computed :{
{: I; t- I+ Y( u; B
},
. P& |: _# L; C" T- L
watch : {
. C) ]7 m# w/ c0 Z. J
kilometers:function(val) {
6 A0 c5 i9 H1 f! x1 `, I* I
this.kilometers = val;( ^7 H& E( ~% N' A- r& q- A
this.meters = val * 1000;' |1 i! T, @: o' b/ V, {6 q# _
},* }5 G- J3 N) `/ r& g# O
meters : function (val) {2 Z7 F/ W! O! b
this.kilometers = val/ 1000;( \( B! j2 u" G N5 }
this.meters = val;
' M5 \" ~# N3 W
}8 V/ ]4 ^$ z! b ~
}
1 _' n `: ]. d; g
});, m( b; p4 J7 b9 F- Q2 ^! t
// $watch 是一个实例方法1 z6 n+ a; u0 x( M) I# k
vm.$watch('kilometers', function (newValue, oldValue) { \( h1 Y3 r4 H6 P+ ^( j" Y+ e
// 这个回调将在 vm.kilometers 改变后调用1 ]$ ]7 w+ B0 D/ ?/ f9 y6 |
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
% M% P5 Y% T$ o
})
9 c6 `3 R/ m g4 ?7 B8 ~
</script>

复制代码