) _: c! h( d9 g
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
) F1 f" v) x8 M: n$ z) E8 Z7 P8 B! j# L! Y8 s. Z5 X- O1 H' W0 _
- <div id = "computed_props">
4 _2 z8 M2 i2 f% _ }! c8 k3 \ - 千米 : <input type = "text" v-model = "kilometers">
' ?: U# g" q6 W9 i - 米 : <input type = "text" v-model = "meters">9 B& j& y9 E/ V7 {$ E" i
- </div>! W2 y5 F; h6 B) [9 D O- f
- <p id="info"></p>0 o1 B- E* b! A! d7 d s
- <script type = "text/javascript">2 A! _9 ]4 t0 j, m. e
- var vm = new Vue({
7 d- a k& L/ N+ l+ I. S( s' V5 D - el: '#computed_props',0 V+ r+ ^( `- e2 P' O+ x
- data: {
8 Z+ M. d0 W6 L3 T1 i( u - kilometers : 0,
; K$ {$ w( w; n - meters:0
' Y% Y5 m6 {* q( l/ i0 m* l+ W - },
$ ?2 l4 y4 r4 L. H8 z$ Q2 U4 k - methods: {9 R7 W' a3 D/ q$ N" \% x( K, }& o4 O2 W- T
- },$ \) t( K& V" m( S
- computed :{
6 F) Y8 k- H2 M- x9 \# J/ G, T - }, x) e8 q* E: }5 j
- watch : {3 K( q7 g0 a9 q5 R1 i
- kilometers:function(val) {
6 Z6 ?# [. O3 K1 j1 H6 J5 K1 z - this.kilometers = val;
. `1 `6 r! O; S' S+ G j - this.meters = val * 1000;
: U0 R) F, q' q: t - },
! S' A, @) Q$ i5 J/ _$ j" T - meters : function (val) {
! s: I( D+ y; |8 {" L0 y - this.kilometers = val/ 1000;8 Z' ~4 O0 O) R9 S4 F
- this.meters = val;
: C) h& ~$ ?' ~' R) V6 D - }
( y3 E2 j0 W) Z6 }$ j- _ - }9 B* c6 D" w3 h; F* w
- });
8 q" E. C6 U8 i* s# n6 P - // $watch 是一个实例方法8 L" y1 C1 H- x2 Q# _0 A
- vm.$watch('kilometers', function (newValue, oldValue) {5 O+ V& q2 d( ^& q1 N
- // 这个回调将在 vm.kilometers 改变后调用
) T4 Y- R! K/ Q8 R8 K' U" g4 i* a - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;: R( L9 r% V+ R
- })8 i7 X5 i# i! H( o! J& M
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 W; |, n6 b: J2 n- z
0 G; X! y* H9 [% x5 U) [
, V; @2 V4 A- ?1 Q- a6 u4 D- U# f8 C( M9 {' s6 S: i6 C
|