1:普通的监听:
data () {
return {
watchNum:1,
}
},
watch: {
watchNum(newValue, oldValue) {
console.log(oldValue)
console.log(newValue)
},
methods:{
watchText(){
this.watchNum = this.watchNum +1;
},
}

2:对象的监听:
data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }
}
},
watch: {
  bet: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}
tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:
3.对象具体属性的watch:
data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }
}
},
computed: {
  pokerHistory() {
    return this.bet.pokerHistory
  }
},
watch: {
  pokerHistory(newValue, oldValue) {
    console.log(newValue)
  }
}

vue:监听数据的更多相关文章

  1. vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  2. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  3. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  4. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  5. vue —— 监听

    vue的监听用途很大 比如:通过数据的值的变化,执行某个方法 首先:data中要有个变量初始值 finalTotalAmount的初始值是0 我们想当finalTotalAmount值发生变化时,执行 ...

  6. 关于微信小程序使用watch监听数据变化的方法

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...

  7. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  8. $watch监听数据变化和run方法

    angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...

  9. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. hierarchical_mutex函数问题(C++ Concurrent in Action)

    C++ Concurrent in Action(英文版)书上(No.52-No.53)写的hierarchical_mutex函数,只适合结合std::lock_guard使用,直接使用如果不考虑顺 ...

  2. 用gradle打包可运行jar

    参考了 http://www.cnblogs.com/yongtao/p/4104526.html gradle文件加入 apply plugin: 'application' mainClassNa ...

  3. C语言强化——字符串(2)

    1.将包含字符数字的字符串分开,使得分开后的字符串前一部分是数字后一部分是字母.例 如"h1ell2o3" -> "123hello" #include& ...

  4. [UE4]用.csv作为配置文件

    csv文件,以逗号分割的值的文件. csv文件的第一行一般为表头,第二行开始是字段值. .csv文件,纯文本,可以用记事本打开看到内容. excel支持csv文件,方便修改. 导入csv文件: 一.建 ...

  5. 基础回顾之List集合

    1.List集合的的contains()方法底层调用的是equals()方法,当比较自定义对象时,需要重写比较对象的equals()方法 2.List集合的remove()方法底层依赖的也是equal ...

  6. 关于-RegExp

    // exec() exec() 查找并返回当前的匹配结果,并以数组的形式返回. // test() test() 方法检索字符串中的指定值.返回值是 true 或 false. // compile ...

  7. 如何在ubuntu系统里面用新加装的硬盘对系统进行扩容

    我这里是用256G的固态硬盘安装了系统,想通过扩展1T的机械硬盘存储数据的,现在我们需要的就是把这个1T的硬盘进行扩容进去 使用df -h和sudo fdisk -l命令查看磁盘情况 切换到root用 ...

  8. h5登录页面

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 洛谷 : P3374 【模板】树状数组 1 P3368 【模板】树状数组 2

    ******************************************************************************** 属于模板题了,一个单点修改区间询问,一 ...

  10. python 读取bin文件

    python读取bin文件并下发串口   # coding:utf-8import time, serialfrom struct import *import binascii file = ope ...