Vue.js 监听属性

admin · 发表于 2018-7-4 11:05:03

本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:

实例

<div id = "computed_props">
2 `2 _; }/ u1 Q9 w
千米 : <input type = "text" v-model = "kilometers">+ V4 C, h5 C3 c! k! u; l$ C7 u
米 : <input type = "text" v-model = "meters">3 I6 y: V$ [6 G \5 \9 s
</div>
. w6 L! d2 X; E8 U5 O M
<p id="info"></p>1 ]: e( N3 E7 C% [5 P: Q3 F
<script type = "text/javascript"># z- ~4 D$ W8 ~$ _. h4 ]
var vm = new Vue({6 q7 w6 l0 f& n; o
el: '#computed_props',$ |3 q1 @: R4 Y
data: {$ F9 f6 ?: B# r# \
kilometers : 0,& c; j f9 p) b2 C
meters:0
: K0 S% m5 ^& Q o, b% g
},* h% _1 r8 x; A% |! N9 M, X
methods: {
7 J' f. D' `% l) m( [
},9 G! L$ [2 ?& }1 x
computed :{. \4 P, h% x7 y9 \7 m0 s
},% w, }) r C% m$ \
watch : {
' m! |% a' y( A1 ?
kilometers:function(val) {
0 ^6 k% w- a1 D+ c4 m
this.kilometers = val;) f7 q4 w4 B$ T) {
this.meters = val * 1000;4 x8 K f1 P) L; c
}," d, M( _' b7 C( e# Q: @! `( u
meters : function (val) {, i- \+ r$ k1 Y) w4 p
this.kilometers = val/ 1000;: u4 @) m/ V; N, o5 X$ W
this.meters = val;
0 ~1 G; r# t% u# s/ b5 i
}8 P3 p+ v/ ^5 B5 I
}
% k' {1 d8 K- H8 u! V8 ^& t
});2 c! z/ [; g6 ^2 V* y1 L
// $watch 是一个实例方法
" S( }. L- U! x$ r" d
vm.$watch('kilometers', function (newValue, oldValue) {
$ ?& |9 m6 _* y( @
// 这个回调将在 vm.kilometers 改变后调用8 f6 \8 M1 F/ s# v# E* p/ J
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;9 L1 W9 s0 w7 ^
})+ N2 `# C0 L5 k
</script>

复制代码

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

帐号		自动登录	找回密码
密码			立即注册

[Vue.js] Vue.js 监听属性