Vue开发之watch监听数组、对象、变量操作分析


Posted in Javascript onApril 25, 2019

本文实例讲述了Vue开发之watch监听数组、对象、变量操作。分享给大家供大家参考,具体如下:

1.普通的watch

data() {
  return {
    frontPoints: 0
  }
},
watch: {
  frontPoints(newValue, oldValue) {
    console.log(newValue)
  }
}

2.数组的watch:深拷贝

data() {
  return {
    winChips: new Array(11).fill(0)
  }
},
watch: {
winChips: {


handler(newValue, oldValue) {



for (let i = 0; i < newValue.length; i++) {




if (oldValue[i] != newValue[i]) {





console.log(newValue)




}



}


},


deep: true

}
}

3.对象的watch

data() {
return {


bet: {



pokerState: 53,



pokerHistory: 'local'


}
  }
},
watch: {

bet: {


handler(newValue, oldValue) {



console.log(newValue)


},


deep: true

}
}

4.对象的具体属性的watch:

data() {
return {


bet: {



pokerState: 53,



pokerHistory: 'local'


}
  }
},
computed: {

pokerHistory() {


return this.bet.pokerHistory

}
},
watch: {

pokerHistory(newValue, oldValue) {


console.log(newValue)

}
}

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 #Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 #Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 #Javascript
You might like
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
php短信接口代码
2016/05/13 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python使用Tesseract库识别验证
2018/03/21 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python中的colorlog库使用详解
2019/07/05 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
忠诚奉献演讲稿
2014/09/12 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014年副班长工作总结
2014/12/10 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript
小程序实现侧滑删除功能
2022/06/25 Javascript