目的:当数据变化时,为其中重要数据增加边框,实现闪烁以达到提醒目的。数据格式如下,只有在未处理火警/故障时增加闪烁边框。可以使用watch进行深度监听。数据格式已定,也非常明确要监听的数据是有两个。既然这样就没有必要进行深度监听。可以结合computed实现返回需要监听的数据,只进行普通监听即可。

数据格式:

data:[

{
type:0,
title:'火警',
alarmData:210,
modules:[

{
color:"red",
icon:"<i class='layui-icon layui-icon-fire'></i>",
style:'solid',
bcolor:'white',
url:'',
title:'实时火警',
children:[{
name:"火警未处理",
value:0
},{
name:"今日处理",
value:5
}]
},{
color:"blue",
icon:"<i class='layui-icon layui-icon-set-fill'></i>",
style:'solid',
bcolor:'white',
url:'',
title:'实时故障',
children:[{
name:"故障未处理",
value:20
},{
name:"今日处理",
value:12
}]
}

]
},{
type:1,
title:'巡检',
modules:[]
},{
type:2,
title:'视频',
modules:[]
}

]

vue实例代码片段

var vm = new Vue({
el:"#real_info",
data:data,
watch: {
  fireValue: {
    handler:function(newValue, oldValue) {
                 //判断数据实现具体代码
    }
  },
faultValue:{
    handler:function(newValue, oldValue) {
       //同上
    }
}
},
computed: {
fireValue:function(){//未处理
return this.items[0].modules[0].children[0].value;
},
faultValue:function(){//未处理
return this.items[0].modules[1].children[0].value;
}
}

})                                                

Vue中使用computed与watch结合实现数据变化监听的更多相关文章

  1. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  2. 033——VUE中安装使用vue-devtools调试工具用于监控数据变化

    vue官网:https://cn.vuejs.org/ 下的官方仓库:vue-devtools  安装到火狐或谷歌下都可以,安装成功之后,按F12查看就可以了

  3. Vue 中的 computed 和 methods

    Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.

  4. vue中methods,computed,filters,watch的总结

    08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  7. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  8. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

  9. 八、Vue中的computed属性

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

随机推荐

  1. C++ - main()函数参数

    main()函数及其参数说明 main()函数主要形式: int main(void) int main(int argc, char *argv[]) = int main(int argc, ch ...

  2. 脚本执行JavaScript代码

    下面是一个具体的demo测试脚本引擎,执行javas文件. package Rhino; import java.io.FileReader;import java.net.URL; import j ...

  3. 分享微信h5支付经验

    <?php //use Flight; /** * 微信支付服务器端下单 * 微信APP支付文档地址: https://pay.weixin.qq.com/wiki/doc/api/app.ph ...

  4. GDB 远程调试Linux (CentOS)

    1.引用: https://blogs.msdn.microsoft.com/vcblog/2016/03/30/visual-c-for-linux-development/ 注意安装gdbserv ...

  5. 洛谷P1556 幸福的路

    P1556 幸福的路 题目描述 每天,John都要为了农场里N(1≤N≤10)头牛的健康和幸福四处奔波. 每头牛的位置可以描述为一个二维坐标,John从坐标原点(0,0)出发.为了使路径更有趣,Joh ...

  6. 如何在 Laravel 中 “规范” 的开发验证码发送功能

    什么是ThinkSNS ? ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+(简称TS+).Thin ...

  7. EOS Bios Boot Sequence

    EOS version:v1.0.5 Date:2018-06-19 Host: Centos 7 Reference :https://github.com/EOSIO/eos/wiki/Tutor ...

  8. 洛谷P2939 [USACO09FEB]改造路Revamping Trails

    题意翻译 约翰一共有\(N\))个牧场.由\(M\)条布满尘埃的小径连接.小径可 以双向通行.每天早上约翰从牧场\(1\)出发到牧场\(N\)去给奶牛检查身体. 通过每条小径都需要消耗一定的时间.约翰 ...

  9. Django之Form的ModelForm

    form与model的终极结合. from django import forms class BookForm(forms.ModelForm): class Meta: model = model ...

  10. [Android]《Android艺术开发探索》第一章读书笔记

    1. 典型情况下生命周期分析 (1)一般情况下,当当前Activity从不可见重新变为可见状态时,onRestart方法就会被调用. (2)当用户打开新的Activity或者切换到桌面的时候,回调如下 ...