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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 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中Date获取时间不正确怎么办
2008/06/05 PHP
php 分库分表hash算法
2009/11/12 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
Yii清理缓存的方法
2016/01/06 PHP
php生成无限栏目树
2017/03/16 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JS原型链怎么理解
2016/06/27 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
使用Python写CUDA程序的方法
2017/03/27 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
对python中的logger模块全面讲解
2018/04/28 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python如何将模块打包并发布
2020/08/30 Python
python中xlutils库用法浅析
2020/12/29 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
单位消防安全制度
2014/01/12 职场文书
索桥的故事教学反思
2014/02/06 职场文书
故宫英文导游词
2015/01/31 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
解析Java中的static关键字
2021/06/14 Java/Android