zoukankan      html  css  js  c++  java
  • vue2之对象属性的监听

    对象属性监听的两种方法:

    1.普通的watch

     1 data() {
     2     return {
     3         frontPoints: 0    
     4     }
     5 },
     6 watch: {
     7     frontPoints(newValue, oldValue) {
     8         console.log(newValue)
     9     }
    10 }

    2.对象属性的watch

     1 data() {
     2   return {
     3     bet: {
     4       pokerState: 53,
     5       pokerHistory: 'local'
     6     }   
     7     }
     8 },
     9 watch: {
    10   bet: {
    11     handler(newValue, oldValue) {
    12       console.log(newValue)
    13     },
    14     deep: true
    15   }
    16 }

    tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
    如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
    事例如下:

    3.对象具体属性的watch

     1 data() {
     2   return {
     3     bet: {
     4       pokerState: 53,
     5       pokerHistory: 'local'
     6     }   
     7     }
     8 },
     9 computed: {
    10   pokerHistory() {
    11     return this.bet.pokerHistory
    12   }
    13 },
    14 watch: {
    15   pokerHistory(newValue, oldValue) {
    16     console.log(newValue)
    17   }
    18 }

    对象具体属性的watch可以直接用引号把属性括起来,就可以实现对象中特定属性的监听事件:

     1 data() {
     2   return {
     3     bet: {
     4       pokerState: 53,
     5       pokerHistory: 'local'
     6     }   
     7     }
     8 },
     9 watch: {
    10   'bet.pokerHistory'(newValue, oldValue) {
    11     console.log(newValue)
    12   }
    13 }
  • 相关阅读:
    根据输入的个数,打印每行做多输出3个的for循环
    在启动页面后面再加载一个广告页,可以定制动画等
    frame.size.height无法直接赋值问题
    iOS开发远程推送
    iOS——UIKeyboardWillShowNotification 监听键盘高度变化
    iOS 浅谈本地通知 UILocalNotification
    iOS中assign、copy 、retain等关键字的含义
    GCD
    xocde快速定位崩溃代码
    关于xcode打包app
  • 原文地址:https://www.cnblogs.com/lgjava/p/12753462.html
Copyright © 2011-2022 走看看