2 K& k. Q) e* B9 a8 y1 J本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例" R& N3 G4 U7 U
' @! o1 W! F1 X
- <div id = "computed_props">/ ~( t+ D8 Y' S( d
- 千米 : <input type = "text" v-model = "kilometers">9 X0 f, E& |: `2 K5 T8 q3 j* I
- 米 : <input type = "text" v-model = "meters">, G: e" x: B+ ]: c3 p
- </div>0 r# a! ?& r5 c& `) @( ^' k1 W% t, S
- <p id="info"></p>2 [. j G+ E# l( @" m6 X
- <script type = "text/javascript">
1 t$ k7 e# P! l+ _ - var vm = new Vue({0 z2 N+ u1 u l, ?- y
- el: '#computed_props',8 | t+ o1 s' ]5 O* l" I) F' c2 H% Q
- data: {8 |- y0 z: _; \( y: `3 Q- c
- kilometers : 0,0 l. D! J# {% E7 z& H, I5 {
- meters:0
% \* A, l1 s4 S7 u - },
, Z( Y6 Q g! E/ [ - methods: {% q, w" \% _) B4 x( u: b
- },, w" A4 u# e) U* q, o0 \9 I& v9 W
- computed :{2 |2 a! D& R" K( _
- },
- P M6 w& B7 e, B - watch : {
' ~ z( ?$ x% \* ^$ ]& N/ Y - kilometers:function(val) {& |! G! R# H+ k5 f* s
- this.kilometers = val;
* J) P( _2 B% b& P - this.meters = val * 1000;$ b; N' F9 a2 M2 P( m" ~3 M
- },
) m. i* K {1 u5 a - meters : function (val) {
+ @0 O" b: C/ c0 i - this.kilometers = val/ 1000;; p4 T$ O/ D# d: k! g- R
- this.meters = val;
! G! }/ D1 U& d8 M5 f1 |% Y - }
5 H, K _6 B# ^4 b2 h - }- l5 j) d0 W5 K1 D0 r l0 ?
- });
0 b2 d/ ?. F4 w. ^1 T7 r4 S# \ - // $watch 是一个实例方法
- `% c! |0 `, q9 p* o - vm.$watch('kilometers', function (newValue, oldValue) {
1 L* p0 ?! |1 K - // 这个回调将在 vm.kilometers 改变后调用
4 @3 h4 u* s; M( K - document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue; g" H- D! I. E2 {
- })
4 z; g7 { K- ~# O - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 % K$ J* y; }0 b% @! K. p f0 Z3 e
, u/ d8 D$ T h) C
: q7 z/ j/ p" F$ S! K
% B+ X8 ~" M/ O+ a8 p. r" P |