2 Y% B* K3 U9 Z本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例
. i9 K% Z8 u: S5 R. |# d$ i+ g# }/ U0 U6 B; X
- <div id = "computed_props">& |/ C1 C4 l% V
- 千米 : <input type = "text" v-model = "kilometers">
' ]2 Q) U1 {# q: u$ g - 米 : <input type = "text" v-model = "meters">5 Y6 _/ |4 C, b% {6 v$ ?
- </div>+ c/ r: g+ \0 ^) G p7 M* G) h
- <p id="info"></p>
9 ^/ D/ F9 k# V0 F! l8 H+ z9 q - <script type = "text/javascript">
7 X; J6 ` }! T - var vm = new Vue({# g5 k( q. G# k- p7 c2 @
- el: '#computed_props',
4 M# k- a$ N) U; d: n0 o - data: {& d% q) a& k5 C1 f! R/ b6 A- ]
- kilometers : 0,, H( |' T9 `. |" S$ V4 E3 V3 o' R
- meters:0
; u( }$ t8 i ?6 W7 v) h5 \& X3 m3 H( H - },
+ i& m; c; S. l - methods: {, C, Y& V8 B$ o, {
- },
( D) i7 J$ F: D: s6 K - computed :{3 Y& L- H* O# H( l- H/ I
- },
3 {$ x1 _8 A3 @/ _2 x+ U& c - watch : {
1 T' m3 d' z2 ^/ P, a( h t - kilometers:function(val) {
# _' l- h1 j7 f$ @0 N - this.kilometers = val;
/ w: T1 Y5 u: ^+ l - this.meters = val * 1000;3 G- X+ p5 V9 J5 Z/ M9 d: ~
- },4 d* H& j+ T% K ^& @
- meters : function (val) {- L n. o6 |& T' P, ?
- this.kilometers = val/ 1000;- d! J7 [# A" N9 T: r' J/ v C
- this.meters = val;
4 q' {8 W0 Z/ Z V% E - }* x# O/ V2 ^4 i; a8 P
- }& X. F& e6 q. {$ [ T
- });4 d+ P$ T1 W/ z& e) Z8 ~
- // $watch 是一个实例方法
. m( l0 f: ^, `2 ~: g- X - vm.$watch('kilometers', function (newValue, oldValue) {
1 ]% a/ O4 `! |" ]3 F - // 这个回调将在 vm.kilometers 改变后调用4 M U. P" r( w* c; `& h$ A
- document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;/ d% R, p0 C# X5 t/ ]
- })
5 |9 F0 l; u1 }% _' p/ V6 L - </script>
复制代码以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
5 w5 W) {5 U5 l: k1 Z
0 J& @( B! m& M3 R* @' _* j
7 z+ {% f2 x+ b$ P. _8 d: Z
6 R7 D: h T- m7 X |