cncml手绘网

标题: Vue.js 监听属性 [打印本页]
作者: admin    时间: 2018-7-4 11:05
标题: Vue.js 监听属性

, k' M& h; \$ o( w
本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:
实例
& P* w# u* c. P! @
! X% ~" {) a9 S. Z
  1. <div id = "computed_props">
      B, J7 }4 p5 \) p8 Y8 ~3 O& z
  2.     千米 : <input type = "text" v-model = "kilometers">
      ]$ p" q1 _4 _4 B* T8 G% \
  3.     米 : <input type = "text" v-model = "meters">- C. v3 W1 |- |' l4 l
  4. </div># w8 r+ J6 t% S
  5. <p id="info"></p>( J3 }7 r$ I* [; D) x* r
  6. <script type = "text/javascript">2 w5 ^- {6 d3 L6 Q
  7.     var vm = new Vue({
    ' \/ D0 |+ Q4 P/ U3 @( o3 Y, s
  8.     el: '#computed_props',
    * y5 I% b: i9 J: v" D
  9.     data: {3 e7 l  S! T7 j9 a3 W9 n0 P+ b( \
  10.         kilometers : 0,
    4 a( ~+ ?% U- {$ c! m
  11.         meters:0
    - y5 l. `% o" L$ g  z( r8 `5 k
  12.     },
    ; b9 j7 @, t1 Z$ A4 [
  13.     methods: {
    - Q2 V" z- ^; H+ r
  14.     },$ m, N+ N4 z4 ]7 b% S, W. e; z
  15.     computed :{& |* b7 {9 @8 G7 F
  16.     },
    : [9 }% k9 U) A1 R) u! k
  17.     watch : {9 q  Q# u5 C( u+ E: \" q
  18.         kilometers:function(val) {
    2 v5 f) V; V5 R: Z4 q0 g' [+ O
  19.             this.kilometers = val;
    & s+ O. S7 Q+ G, t& z9 q
  20.             this.meters = val * 1000;: W% f6 W5 e! i# ]
  21.         },
    8 I7 ]+ [( C' a/ @
  22.         meters : function (val) {$ Z- r6 K+ T) }) O: a1 e
  23.             this.kilometers = val/ 1000;% m+ b( T- [$ p
  24.             this.meters = val;4 E: z% x4 _8 D/ \( Q3 C$ G
  25.         }
    ! l0 o( r: ~  C' p+ Z
  26.     }8 a" f3 d. c6 J. K$ Y
  27.     });) S/ M! Z1 u: N: N' r' `
  28.     // $watch 是一个实例方法
    $ I' h8 s8 E6 N( o& P# L
  29.     vm.$watch('kilometers', function (newValue, oldValue) {
    7 l( l! s8 n! V+ L6 j
  30.     // 这个回调将在 vm.kilometers 改变后调用- O- e" K6 [5 Q2 O4 t0 ~( k
  31.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    ; _' A2 G: v) n) E& M9 P
  32. })
    " M9 n6 `8 R9 E5 n
  33. </script>
复制代码
以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。
当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

8 _; g( E. g9 z$ N- U, g6 r* N8 u  C& {3 A9 s8 G
5 g1 j) `9 M  }) a* P; y
0 o* M3 ]3 Z- \( K8 H9 C




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