cncml手绘网

标题: Vue.js 监听属性 [打印本页]
作者: admin    时间: 2018-7-4 11:05
标题: Vue.js 监听属性
  d* ]5 q, g* v
本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:
实例. v4 s2 Z: u" }4 K4 O( W1 C
. A7 x  ^3 [# {9 z. F0 L8 D
  1. <div id = "computed_props">
    6 [/ e1 i- Y: Z+ f& t
  2.     千米 : <input type = "text" v-model = "kilometers">
    + E7 Y' `8 Z* F0 E- N5 r* _; J# Q
  3.     米 : <input type = "text" v-model = "meters">2 C' L4 u+ h& `4 F& l& r
  4. </div>. z! h4 m4 x. y) Y- Y
  5. <p id="info"></p>
    0 X( W( i( B% c
  6. <script type = "text/javascript">- W. L% n9 F+ I8 \* G) Z, e
  7.     var vm = new Vue({
    : K$ M, b3 q7 |2 U( Q& O6 U1 A
  8.     el: '#computed_props',
    ! C* B) K# M+ z- b3 a
  9.     data: {; N8 F9 g$ v& c2 l5 v2 p7 b
  10.         kilometers : 0,
    ( [- r% j; w' {+ N; t  }
  11.         meters:0
    & A2 [  i7 X# ~: c8 s& ^
  12.     },7 G! [, X# T6 B8 W0 x9 F
  13.     methods: {
    * P2 X+ M4 i8 i
  14.     },$ q5 X+ B. b2 R3 I9 v" v
  15.     computed :{/ k0 E# h; T* J/ g( L( I6 `7 O
  16.     },4 p2 ^9 p, _) `8 _
  17.     watch : {* d# Z. V& }1 N5 h6 h- J% G& f
  18.         kilometers:function(val) {" F/ w6 N2 a  _5 D: y6 k
  19.             this.kilometers = val;
    * R; N5 @& L% r9 n; f! J) _) p) v
  20.             this.meters = val * 1000;
    1 b$ c- e, |  ^4 ~3 z# W
  21.         },
    1 s5 I4 N5 u& q
  22.         meters : function (val) {; i  T% L" a! }# \( h; P; V, |
  23.             this.kilometers = val/ 1000;
    % h9 o+ h$ P1 t$ ]+ e6 X
  24.             this.meters = val;& p: `! d; W' J5 h8 W* ]
  25.         }, m1 N8 l: ?0 q" M1 x
  26.     }
    ; v; z% X3 {# [; u- @+ f$ j, l
  27.     });
    0 i! N2 l" ]0 e" e: C8 b
  28.     // $watch 是一个实例方法. _, i) X2 E' U# I; n# Q/ `
  29.     vm.$watch('kilometers', function (newValue, oldValue) {$ s! w1 H/ f. h
  30.     // 这个回调将在 vm.kilometers 改变后调用9 }/ W- V  ^6 |, P: k& E
  31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    . T; k9 Z( @  {& |9 Y- T3 F
  32. })" v' W) ?% b- \- e0 }5 n3 q# t3 }
  33. </script>
复制代码
以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
3 q  V/ M$ a0 O3 L* E8 |

2 c# }( u5 U9 V  U
; D) t$ h$ P" R. M' H+ ?7 t+ p9 T8 A) r7 s




欢迎光临 cncml手绘网 (http://www.cncml.com/) Powered by Discuz! X3.2