本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
- vue.js使用watch监听路由变化的方法
- Vue数据监听方法watch的使用
- vue watch监听对象及对应值的变化详解
- vue中的watch监听数据变化及watch中各属性的详解
- 实例详解vue.js浅度监听和深度监听及watch用法
- vue watch深度监听对象实现数据联动效果
- vue1.0和vue2.0的watch监听事件写法详解
- vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
- vue计算属性computed、事件、监听器watch的使用讲解
- Vue2 监听属性改变watch的实例代码
- vue watch关于对象内的属性监听