7 I; G+ D' N# X6 ~. A
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例- I; U _$ ?7 S. @( F) F
# r% `" y* y9 e/ z! `( t a, v. t- <div id = "computed_props">
. _. f3 w K: Z j) |' U - 千米 : <input type = "text" v-model = "kilometers">4 E& e: G* o+ ?- q
- 米 : <input type = "text" v-model = "meters">
" [1 c8 u9 ^4 W7 Z8 N( S; s2 G - </div>
/ H; ~3 B( p, |. T: e - <p id="info"></p>3 S8 k/ h$ b# E/ l; P
- <script type = "text/javascript">6 U9 C% }* |- s" ^& z- k3 j
- var vm = new Vue({7 X1 p- {/ S4 u1 d. B9 G0 U" Q4 g t
- el: '#computed_props',$ @* f2 ^. r0 P5 B6 d
- data: {
- b' E; }. i5 u& b1 B6 f. g( W J" B - kilometers : 0, K8 k. J3 g9 w0 `
- meters:0
6 y" ~5 ^, y y; Z- d - },
$ J0 h' k: z M' ~ - methods: {
& T4 V- s! A6 W - },
/ e/ e6 `) ]. f* }# N - computed :{8 L% I! L5 u5 ]4 s: `: @
- },
. Z2 ~. p+ S+ U( p3 F5 z. F4 ^( Q; R - watch : {9 Y7 ~+ t, s& z
- kilometers:function(val) {$ q% |( {; a3 R8 e& n C2 s" g
- this.kilometers = val;
; U# L5 F/ @4 ?3 x6 q - this.meters = val * 1000;9 `7 e5 R* k W; i5 n
- },
% `$ T$ t6 @" q! X0 x; J - meters : function (val) {0 t5 n1 ~( L6 {' M# E/ n
- this.kilometers = val/ 1000;4 w, u2 n) L" S! K5 K, q# T
- this.meters = val;; ~# r& t/ Q R- C+ r' O
- }
/ `4 q. \ r: y P- h7 T7 ^ - }
0 j+ S$ i1 v# N - });
6 K( ]7 h% ]3 x- X g - // $watch 是一个实例方法, Q$ G8 N1 t6 Y# u- L. w
- vm.$watch('kilometers', function (newValue, oldValue) {+ F3 a7 @3 Z; j$ |! I5 C, X# z1 H
- // 这个回调将在 vm.kilometers 改变后调用
0 c2 c- `8 k$ s7 u8 ~, D - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
' u4 m q, p5 m; D! |* W$ O - })
2 R4 X- ~5 V, h, Z) }5 ^ - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
?- _: [$ ^6 |( v5 G. [4 ?2 x$ J" z( a
: ]1 B2 |/ b5 C& p, ^& B
6 ^# u6 W, B" p( [% [( Q |