% R2 ?0 _8 }# l5 A) l本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例) f, u* v3 S" W. o. r1 N2 o& F
' N5 E/ K$ U! j, u$ I- <div id = "computed_props">3 A0 K; |9 y3 M, V* M3 f4 T1 T, J U
- 千米 : <input type = "text" v-model = "kilometers">8 Q* C6 I& w+ T4 B5 `, y; s Q
- 米 : <input type = "text" v-model = "meters">! r$ G Z( l; j" A' U% z2 |
- </div># ~8 G2 x( B; I5 p& x
- <p id="info"></p>" e: e) |' E1 R/ ?
- <script type = "text/javascript">; H. N3 B" g* i: S
- var vm = new Vue({
: h8 ~! A5 A# y& f4 { - el: '#computed_props',! L6 M. e# d e0 T7 v1 Y, V" @1 H
- data: {
+ A k2 o# \& V* X1 C8 w - kilometers : 0,
$ W6 S5 e; o' g) f6 o8 E - meters:0
- d, G/ V) g+ j. G. n - },3 ^& d* l, J2 W
- methods: {2 d& d2 \0 E3 ~ S
- },
0 W) |3 s% X8 X# Q& j8 D7 d( K - computed :{
/ U) ?/ y) D" f ~ - },! f6 @1 x8 z- Y @4 k8 ?& e
- watch : {
2 j R6 I5 u! E$ Y - kilometers:function(val) {. Y# [& |$ D1 |. |9 L* E
- this.kilometers = val;6 F: A2 G5 B) F$ N2 L# M- Q3 D% M
- this.meters = val * 1000;: |$ Z- T1 S+ ~! l5 V, k# g* [
- },3 E$ ?5 d- k4 Y: \) ~$ e! s; J! U
- meters : function (val) {
4 t' S( S+ E8 X( B& t; d) Q - this.kilometers = val/ 1000;, P0 R) u0 D( r' c6 r8 ?
- this.meters = val;- C% Y3 \$ i: P, S* z
- }7 z/ `$ W! e4 @. X. j
- }% W* }7 t" O t1 f
- });! R# j- |. [ \2 z# v8 P; m, r
- // $watch 是一个实例方法
, ?# z# w2 }5 [5 {4 | - vm.$watch('kilometers', function (newValue, oldValue) {
7 ^! T0 M: T. v8 `: d, K! n, Z - // 这个回调将在 vm.kilometers 改变后调用* G. [' L% O' C7 c! D# y+ T
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue; u# q$ H* W* `. X+ S2 j9 p: } p
- })& w5 v: S! d5 j' b a9 o' T. T) [! R- ~
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 " t& C2 k& f- B
$ t" S* N7 B; F! Y$ r
! G: [' _0 H. W8 e
( P! X0 T/ Y' R4 ?7 A5 l+ q |