vue watch 监听
1、普通的watch

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

2、数组的watch,注意监听数组的变动不需要deep: true
。

data() {
return {
winChips: new Array(11).fill(0)
}
},
watch: {
winChips(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
}
}

fill方法使用给定值,填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
3、对象的watch

data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
watch: {
bet: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}

tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:
4、对象具体属性的watch[活用computed]

data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}

vue watch 监听的更多相关文章
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- 详解Vue 如何监听Array的变化
详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- Vue -- 数据监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 12.vue属性.监听.组件
1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- vue+hbuilder监听安卓返回键问题
1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...
随机推荐
- nodejs mac启动相关命令
redis: redis directory/src/redis-server redis-directory/redis.conf & mongodb: mongod &
- C++虚继承作用
C++虚继承可以防止多重继承产生的二义性问题. 虚继承,就是在被继承的类前面加上virtual关键字,这时被继承的类称为虚基类,如下面代码中的base类.虚继承在多重继承的时可以防止二义性. clas ...
- 项目中常用的js骚操作
//打开网址window.open("http://www.runoob.com"); //判断是否为url var url = $("#url").val() ...
- C#中var关键字用法分析
原文连接 本文实例分析了C#中var关键字用法.分享给大家供大家参考.具体方法如下: C#关键字是伴随着.NET 3.5以后,伴随着匿名函数.LINQ而来, 由编译器帮我们推断具体的类型.总体来说,当 ...
- laravel 视图调用方法并传递参数
视图层 route 中文 路由 <a href="{{route('cc',array('id'=>11111))}}">446454</a> 路由层 ...
- Ogre 学习记录
http://www.cppblog.com/richardhe/articles/55722.html 1: 设计初衷 它设计初衷是完全跨平台的.抽象的接口隐藏了平台相关的细节. 它设计初衷是大幅度 ...
- qscoj53(图的m着色问题)
题目链接:http://qscoj.cn/contest/12/problem/53/ 题意:中文题诶- 思路:n个点, 那么最多用n种颜色,所以我们可以枚举颜色种类1~n,然后再判断用 i 种颜色可 ...
- [Xcode 实际操作]二、视图与手势-(7)UIView视图的渐变填充
目录:[Swift]Xcode实际操作 本文将演示创建一个具有渐变填充色的图形 import UIKit class ViewController: UIViewController { overri ...
- Mol Cell Proteomics. |彭建祥| 人胃肠道间质瘤亚群蛋白质组图谱
大家好,本周分享的是发表在Molecular & Cellular Proteomics 上的一篇关于人胃肠道间质瘤亚群蛋白质组图谱的文章,题目是Proteomic maps of human ...
- vant搜索框问题
最近使用vant搜索框时发现,当输入内容点击一次搜索有数据,点击错号把内容去掉再点击搜索,都没进入点击搜索方法. 解决方法:把bindtop改成bindtouchstart <van-searc ...