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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Layui Form 自定义验证的实例代码
Sep 14 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
出国留学经济担保书
2014/04/01 职场文书
临床护理求职信
2014/04/26 职场文书
环保建议书400字
2014/05/14 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js