" ]. z/ g7 N/ ]2 A' s9 ?; {) k本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例+ {' c0 @1 H9 s9 X. N' i" m( K
$ n7 q5 L& z2 Y5 Q# w1 }( r# v5 ~' D
- <div id = "computed_props">) F. T0 o% G/ E8 s. u
- 千米 : <input type = "text" v-model = "kilometers">
! p, m0 _* h* N: b1 X - 米 : <input type = "text" v-model = "meters">
2 T1 a+ R. B0 Y+ ~7 M - </div>
+ D- [1 k$ ^# ?; u+ X - <p id="info"></p>
. e7 P% p' C' v/ X* T2 n - <script type = "text/javascript">
4 v5 q& s( J: ?( [, ?" }7 c - var vm = new Vue({- j n0 z! o @4 @
- el: '#computed_props',
6 v% s" V" ?. a1 u' [9 @9 d - data: {6 D/ b7 p. I0 r n2 F
- kilometers : 0,
4 O9 Y; X# h3 v8 c8 O, o1 A - meters:0. \' t3 m! t1 X$ u. }
- },! a3 o6 l7 {6 I# E+ p% S- R1 R
- methods: {6 J( L2 M) L; l
- },
; t1 d9 u( b5 Y, A3 q - computed :{
r, Q$ Q1 G, E @8 i1 h2 K% X - },6 Q g Q% `; O; w$ C9 F
- watch : {
4 \1 j5 T) [9 p2 ~% H- Z* } - kilometers:function(val) {" G8 n( t' V1 z$ D/ i% p
- this.kilometers = val;
! b0 m' W G, Q5 l6 {2 J - this.meters = val * 1000;& {0 j6 G# O" G7 x4 ?. |; c
- },
7 p) W0 t" V( \. V# R( F! p - meters : function (val) {# f/ B) ?7 U) i: X* S
- this.kilometers = val/ 1000;
* M3 v. [- V# t5 Q- P2 @; O" o3 I - this.meters = val;
- }; x, `+ p3 g: C1 q/ S; }; t - }
/ k+ P* s2 @0 U+ f% R; C' }5 K6 Y - }) ~( ^2 r$ M. \/ h, w e
- });! l; z1 T) }& ?" I
- // $watch 是一个实例方法8 ~ j* X1 W2 E5 T
- vm.$watch('kilometers', function (newValue, oldValue) {
! |# h p9 w) J8 `! @ - // 这个回调将在 vm.kilometers 改变后调用- F+ v# ]; x6 s: L4 f
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
3 U# P- L9 z0 m) P4 Y' x: Y - })8 r. V; X; w; S6 i; P
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 ' C @) v0 u- @& B8 z) t |
2 f: D7 a2 E( Z, [+ e
, v9 H* Y/ A$ J- \ ^$ }! Z; R ?3 N
|