Vue中使用computed与watch结合实现数据变化监听
目的:当数据变化时,为其中重要数据增加边框,实现闪烁以达到提醒目的。数据格式如下,只有在未处理火警/故障时增加闪烁边框。可以使用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结合实现数据变化监听的更多相关文章
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- 033——VUE中安装使用vue-devtools调试工具用于监控数据变化
vue官网:https://cn.vuejs.org/ 下的官方仓库:vue-devtools 安装到火狐或谷歌下都可以,安装成功之后,按F12查看就可以了
- Vue 中的 computed 和 methods
Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.
- vue中methods,computed,filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
- 八、Vue中的computed属性
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
随机推荐
- List Control控件中及时捕获checkbox被选中的消息的解决方案
转自:http://blog.csdn.net/vycode/article/details/7345073 我的功能需求是:用户可以在List Control里添加item,当无选项被选中(即Che ...
- c#---delegate关键字
http://www.cnblogs.com/wenjiang/archive/2013/03/12/2954913.html 注:只看红字 在C#中,delegate是一个神奇的关键字,值得拿出来单 ...
- IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题
Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术,Ajax ...
- JavaScript进阶 - 第10章 编程挑战
10-1 编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图:
- Java怎么把一个.log文件,以text文件方式打开,显示在桌面
总要有一个开始吧 群里面有一个哥们,问这个问题,索性记录下来, quextion: Java怎么把一个.log文件,以text文件方式打开,显示在桌面 anwser: 这里注意一个问题:拼接路径的时候 ...
- linux 02 基础命令
linux 02 基础命令 1.alias 别名 pyvip@Vip:~/demo$ alias lh="ls -lh" #将ls -lh的功能赋给lh(lh原来并没有意义)这个赋 ...
- criteria用法
Criteria Query通过面向对象化的设计,将数据查询条件封装为一个对象.简单来讲,Criteria Query可以看作是传统SQL的对象化表示,如: Java代码 Criteria cri ...
- python学习《一》
从词篇博客开始,记录python3.0学习笔记 python3里 字符串用双引号,或者单引号,包起来 3双引号和3单引号 代表换行
- windows下使用MYSQL的mysqldumpslow进行慢日志分析
1.首先安装好perl环境. 2.在dos环境中,切换到perl目录中,例如我的目录是 dos 命令 cd c:\Perl\bin 3.在此目录输入perl mysqldumpslow的路径\mysq ...
- asp.net MVC 4.0 View回顾——布局页与分部页
asp.net MVC 4.0中总结 视图里加载部分视图几种方法 @RenderPage() 但它不能使用 原来视图的 Model 和 ViewData ,只能通过参数来传递. @RenderPage ...