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 相关文章推荐
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
浅谈js的异步执行
2016/10/18 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python制作抖音代码舞
2019/04/07 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
关于元旦的广播稿
2014/02/16 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
五水共治一句话承诺
2014/05/30 职场文书
小学班主任评语
2014/12/29 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
铁人观后感
2015/06/16 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书