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

<div id = "computed_props">
B4 S4 p+ @+ T; \+ w
千米 : <input type = "text" v-model = "kilometers">
8 s- c# f+ n+ J0 f0 F
米 : <input type = "text" v-model = "meters">
" \: |! S( C$ }- i& w
</div>
5 i7 V+ ~) e2 J+ ^6 Q! T7 \# {! t
<p id="info"></p>+ O( p" e4 g* y& X/ ^+ W5 H7 N8 F
<script type = "text/javascript">
; f, Z7 {; P5 j
var vm = new Vue({
' C3 P) K s! f7 v; D/ o0 ~5 }
el: '#computed_props',
/ ~! J( m. m* z. A5 V+ ^
data: {9 p3 N2 R3 y) V3 b
kilometers : 0,
( J" G; Q$ H/ x2 K
meters:0
},6 a1 Q% m) ^0 o8 Y
methods: {
' I! T8 {& ?" P
},
9 I/ V0 R) p: p) Y& S( v4 N
computed :{* \; G% f0 R0 o, W+ G
},
$ _. T6 d0 W* T: D+ y
watch : {
^$ Y1 p2 a+ [8 Y
kilometers:function(val) {
7 [2 t8 ~) A4 H9 z1 g5 b! n
this.kilometers = val;# ^$ a3 u$ ]! L( }3 _
this.meters = val * 1000;
+ m: u. y ?& z; M
},
! x% M6 ]; L' v1 O
meters : function (val) {+ y( C+ ^/ w9 b: o" _
this.kilometers = val/ 1000;
1 r' i# f3 I" ~8 L# J
this.meters = val;$ q: D! u) ~9 Z) P
}1 {+ m' q- I- q# d+ ]
}
8 U( F- ^1 M; t* u) q- I
});
; p% b4 K: l8 H5 J" m! F
// $watch 是一个实例方法7 I) D! P4 I4 l2 t* u5 \
vm.$watch('kilometers', function (newValue, oldValue) {& I+ w. V5 T# l1 o3 O* J
// 这个回调将在 vm.kilometers 改变后调用
: G) Z! d* p3 n, ], @/ D7 L
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
( ]* l9 y* O7 V, g2 _, q
})
4 y" o9 r* }, o! Q% C3 f
</script>

复制代码