$ _8 K, m( Z& B2 d本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例. i" ~& d9 j2 C- X% k
% ~1 }5 e+ K4 x- <div id = "computed_props"> B& P' R) L6 r9 `
- 千米 : <input type = "text" v-model = "kilometers">
9 n, }& z9 ^' Q" G" R) n; D" e, Q. L - 米 : <input type = "text" v-model = "meters">' V% j% w! v$ x
- </div>
! c% a; r3 t% ? D4 K8 ] - <p id="info"></p>
4 S# b J3 n5 g9 k0 X - <script type = "text/javascript">
3 A' A6 u0 M4 z) h9 ` - var vm = new Vue({
$ v/ {3 D9 `1 a: M% [ - el: '#computed_props',+ I: K6 h: A2 o8 Z V. R
- data: {
9 ]( _4 h; r- g6 P6 s9 s& R6 i( f5 I - kilometers : 0,
/ o- y3 p) c9 b* t2 E: t( r - meters:0, k. |: }+ z, T, G' ]
- },- W$ W, G) [: a0 Q6 g
- methods: {6 m3 h5 S. c C, y, k8 n
- },# ?$ e2 G3 m" u6 ^+ k2 {0 H6 y8 N
- computed :{
7 k4 L4 X3 g' m" k7 A - },
4 V" j Y% H* |3 w5 s6 ` - watch : {
5 F1 a* u! d3 Q' I0 V) ^9 p/ s - kilometers:function(val) {
0 d9 S4 m) h: B2 m1 }7 r/ H - this.kilometers = val;
7 Y" N4 t C/ N9 C/ f/ f. ` - this.meters = val * 1000;
: s6 i: S, k( Z! h - },8 z: T! t z" K: e
- meters : function (val) {1 z7 a2 O# P2 \5 Z
- this.kilometers = val/ 1000;
2 Q3 C: H! ]2 j' } - this.meters = val;
5 Y8 m* N' x6 X2 p. \ - }
9 }% R2 {5 J. L; T d- F. p; G) @ - }
; n1 s/ m- h3 N$ {/ q* U! Q+ Z - });2 c+ O0 |, a$ r6 A, ^3 P; ]- G
- // $watch 是一个实例方法
8 J0 A5 ~$ N z) s - vm.$watch('kilometers', function (newValue, oldValue) {
4 G$ \( X: {3 c8 ~7 f& U% ?- _: j - // 这个回调将在 vm.kilometers 改变后调用2 H/ k5 Z9 R& P3 ?7 p: l. l1 y- R
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
/ N+ K7 W1 ~" v r8 P - })3 b L; r- L; f
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
# c) ^6 M% F( T9 I+ |
1 V/ y& w( `7 D' F- C" ]6 V$ l2 c, ^& V, Y, _# `
0 g* C8 m: H/ ~0 m/ s# [" }( @ |