. E, C5 |3 e7 F D- H/ N! ?( D
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
# V2 _9 b$ ]+ T( t6 s4 u+ v' m4 n0 a4 Z7 Z5 h/ I4 C5 Q& i! ?
- <div id = "computed_props"># s7 b/ v# E# t7 @; l
- 千米 : <input type = "text" v-model = "kilometers">
# J* l; _9 ^6 X& b - 米 : <input type = "text" v-model = "meters">
* q5 l/ R' t; `! C3 E9 k - </div>
9 W: W& P: { b( ]/ x9 f# v' ~* o* r& D - <p id="info"></p>2 U- J0 ]$ r+ [4 _6 L
- <script type = "text/javascript">7 e- a5 D) K" h2 C' \
- var vm = new Vue({
- }: M* U/ e: N5 K$ | - el: '#computed_props',* s/ e% A( ~: @+ l6 }$ ~ ^# s
- data: {
# B) A6 G1 N, y# q, L/ [# i - kilometers : 0,8 d# Z* C0 U/ O, F
- meters:0
* P# O6 H! B& _9 Y7 E4 ~" Q+ L - }, J3 ~3 _6 [3 r; G6 L
- methods: {
( m4 O! ]) v! A N1 ^# ?7 ] - },
. s" u/ W7 y1 y0 @, `' p2 u. k - computed :{3 j B2 v' b4 r# }, W8 S; m
- },
6 w6 p I) H, A - watch : {$ U ]* r2 u- ?3 y, u+ B
- kilometers:function(val) {; g6 @6 g/ M, l3 Z! s7 o' V# Q- @
- this.kilometers = val;
' T% J Q9 T s+ |5 J - this.meters = val * 1000;& x0 H6 X# s6 Q; n3 J
- },
# ^2 M" } G# s) D - meters : function (val) {
' z2 r* P) m1 T - this.kilometers = val/ 1000;
* m: A; q; s' L- O1 ` - this.meters = val;, k8 ]1 R/ U% J! ]7 g9 s
- }: W C& z) ~$ J* f- O" e4 @
- }
& w9 ]" _& n" M% H1 V8 ` - });# }: O3 I3 g, y
- // $watch 是一个实例方法
5 p; e: I s8 d& B2 V! r - vm.$watch('kilometers', function (newValue, oldValue) {
( c5 u( h1 p$ w {$ J( s - // 这个回调将在 vm.kilometers 改变后调用& A( a4 V2 Q# ~( G. p
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;# ?- b0 e. Y* R- q6 i& Q
- }); Y' ^' a) t, B& m6 c
- </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。 * @0 S9 O8 y) B; \' B
, @7 R7 E y! w6 l; I5 j+ s# {
4 x- Z* d) X8 ?5 ?* M p- Q* F/ I) w4 l
|