% @7 F( r ^: p" n0 `6 q+ ?本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
! Z& z$ X3 h. @0 y. U& W' n n1 a4 U& u6 D* k9 o) y, V
- <div id = "computed_props">
$ c& V2 a" S, k! M; b - 千米 : <input type = "text" v-model = "kilometers">
( H6 i4 G7 V, H T, E6 {! X1 ] - 米 : <input type = "text" v-model = "meters"> k+ {9 y: j+ N$ u
- </div>) D; i5 l& B/ c/ i4 a" Q0 W1 t, f) Y
- <p id="info"></p>9 @) T4 V. f$ r) [* K( Z2 _
- <script type = "text/javascript">
, F( Q6 s) r/ p* v! t/ C4 p$ j - var vm = new Vue({, Z; V/ I) }- K* f B& e
- el: '#computed_props',4 H& h t! I% [* i# ?5 O5 c
- data: {; A$ h4 S3 b, [& S: @: @9 e: o! u
- kilometers : 0,
; v& }8 R/ E2 C: S* a' | - meters:0% T7 U w, K) |) n
- },1 B2 t+ C& e6 f9 D) t# g
- methods: {5 N# l; v+ H" t+ L
- },
$ @# D6 N1 h+ O# {9 |$ f - computed :{
) _' i5 N% b* n2 m. @1 r+ p- e - },
9 i7 l9 {: V2 j" U z - watch : {: J3 c& T) h9 A2 J* A
- kilometers:function(val) {
- t' {# \+ p0 N, v- P; y# U - this.kilometers = val;
! V( J7 ^& Z# D/ I; D7 e3 j - this.meters = val * 1000;
6 `( l9 |& D% d, [ G0 Z' m5 z - },
( t3 V6 z# ^) q$ b - meters : function (val) {
2 ?' }. t! A# z' \ - this.kilometers = val/ 1000;
4 d ~6 d1 I! O& \& W - this.meters = val;6 w+ g+ M/ Y' T; }
- } J% G( o% c. X
- }% B( k7 E# Z) s
- });
8 M/ F& y. O0 u* z, j - // $watch 是一个实例方法( A- \! ^ ] r7 Q
- vm.$watch('kilometers', function (newValue, oldValue) {( I2 J: ]. a+ l
- // 这个回调将在 vm.kilometers 改变后调用& e/ W& M% G) [. @% e
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;5 i: {2 M3 m2 v2 T/ J" U
- })
; F# `* M; V8 K$ ~4 S4 j% v4 N - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 0 x( P2 F! w( p
& o4 {2 N' U0 R$ U
3 D7 U6 |+ T+ q' n. R g4 d8 a1 d2 e
|