2 k) j" \" ^: e4 m
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
. z: |+ f' B( V& o
/ h. {. a7 b/ w5 R- <div id = "computed_props">+ d0 g x0 m7 Q6 m! p. `
- 千米 : <input type = "text" v-model = "kilometers">7 T) W( E; |/ {
- 米 : <input type = "text" v-model = "meters">" m! Y% u$ h2 S! g3 L& v
- </div>8 j3 K: h6 p4 O/ h2 x+ F( i
- <p id="info"></p>
# h% Z" h+ C9 \; T5 z - <script type = "text/javascript">- ~0 q% A4 ^, i$ c* I& a& J
- var vm = new Vue({; B' ]7 R4 X- [( N& C
- el: '#computed_props',& [) V. E/ z, v5 D L/ {
- data: {
6 {; h2 b0 o5 t3 x- P% Q! L - kilometers : 0,
$ j9 `: i- j q$ F6 Z5 w; l - meters:02 y' [5 c% F( W# ^2 v
- },
$ s; `+ U: N. M7 v - methods: {9 d* ~+ U+ m2 t2 l+ o
- },( E) X% S" Y( s: M- H# C- y8 U
- computed :{
! U, h) s0 U# {: T+ m/ l7 u h - },
, o/ S8 L0 |. h% x4 ] - watch : {8 S& m( n6 _; [
- kilometers:function(val) {
# G: `$ e/ u( C/ u4 ^, R - this.kilometers = val;
" M. l p$ z! c! A* v+ o - this.meters = val * 1000;
% R5 T# D5 w/ E6 w% N4 D, ?) t - },
7 F, V8 L+ c1 @6 [( Z - meters : function (val) {, _3 z0 X3 t4 W
- this.kilometers = val/ 1000;
! G1 S# A( z* ], Q4 U! w - this.meters = val;1 I0 M! W! k4 A3 R! m7 y
- }: e `- x- O. P* M2 a( T3 N1 E7 O
- }1 `) q, V7 K4 }+ E
- });
: ~" X, s; W0 [& H8 ]# H, z$ x - // $watch 是一个实例方法
5 w" R, X1 j! I - vm.$watch('kilometers', function (newValue, oldValue) {$ w1 n* l+ B& d; ^. F' i
- // 这个回调将在 vm.kilometers 改变后调用
& h) L1 @, I( A% P - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;* w; A. }, t" K0 y' K6 Q
- })
$ L) T! {: f) F* Y2 n( ?6 d7 S - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 P/ D3 G/ A, V# V
* ~; R7 o+ A1 M- K+ _4 K! a1 K/ u
9 N+ G1 b* {; _. N
# d* |: d% L# p |