vue 列表数据倒计时,在页面销毁前需要清除定时器,否着会报错。

  export default {
data() {
return {
list: []
}
},
mounted() {
for (let i in this.list) {
this.countDown(i)
}
},
destroyed() {
// 在这个生命周期中清除定时器
for (let i in this.list) {
clearInterval(this.list[i].countDownFn);
}
},
methods: {
formatTime(s) {
let Day = parseInt(s / 60 / 60 / 24, 10)
let Hour = parseInt(s / 60 / 60 % 24, 10)
let Minute = parseInt(s / 60 % 60, 10)
let Second = parseInt(s % 60, 10)
let res = {
d: Day,
h: (Hour + "").padStart(2, "0"),
m: (Minute + "").padStart(2, "0"),
s: (Second + "").padStart(2, "0")
}
return res;
},
countDown(i) {
let item = this.list[i]
this.list[i].countDownFn = setInterval(() => {
item.time_remaining -= 1
if (item.time_remaining <= 0) {
clearInterval(this.list[i].countDownFn);
} else {
item.countDownTime = item.time_remaining > 0 ? this.formatTime(item.time_remaining) : {}
}
}, 1000);
}
}
}

vue列表数据倒计时存在的一些坑的更多相关文章

  1. 解决ie下vue列表数据不能即时刷新的问题

    项目上要兼容IE浏览器(客户要求),发现之前在谷歌浏览器下,操作(增删改查)列表后列表能即时刷新(双向绑定),IE下却不行. 自己调试一下发现,在IE11下,如果GET请求请求相同的URL,默认会使用 ...

  2. 使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue

    [前言] 使用vue处理项目中遇到列表页面时,之前项目中总会有一些细节问题处理得不太好,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法 ...

  3. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  4. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  5. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  6. Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)

    文章目录 1.列表排序 1.1 .代码实例 1.2 .测试效果 1.3.需要掌握的前提知识 2.Vue监测数据变化的原理 2.1.代码实例 2.2 .测试效果 3.Vue检测数据的原理 3.1 基本知 ...

  7. T-SQL Recipes之生成动态列表数据

    Problem 首先什么是动态列表?举个示例,假设你想输出以逗号分隔的IDs,如: 1,45,67,199,298 Solution 生成动态列表数据在我们生活场景中很常见,比如在 Dynamic P ...

  8. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  9. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

随机推荐

  1. CorelDRAW升级计划--如何购买

    了解通过全新 CorelDRAW 2017升级计划更新此图形设计软件所有最新功能的实惠方案.助升级计划,您可以在下一主要产品版本推出时便收到该版本,从而始终使您的产品保持最新.升级计划取代为 X6 和 ...

  2. CentOS 7最小安装配置网络

    安装环境: VMware Workstation14 centos 7.5.1804 最小化安装 安装过程: 在系统安装成功后进行网络配置,我这里采用的是动态ip配置.首先得知道网络配置存放的目录: ...

  3. [luogu2579 ZJOI2005] 沼泽鳄鱼(矩阵快速幂)

    传送门 题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石 ...

  4. 四、服务器上的 Git

    一个远程仓库通常只是一个裸仓库(bare repository)— 即一个没有当前工作目录的仓库.因为该仓库仅仅作为合作媒介,不需要从磁碟检查快照:存放的只有 Git 的资料.简单的说,裸仓库就是你专 ...

  5. nysql数据库优化

    硬件优化 软件优化 my.cnf参数优化,命令监控show global status\G 调优工具mysqlreport sql语句优化 索引的优化 白名单机制--百度,就是让一些不规范的语句执行查 ...

  6. java EE使用response返回中文时,出现乱码问题

    response.setHeader("content-type", "text/html;charset=UTF-8");

  7. 《你又怎么了我错了行了吧团队》第七次作业:团队项目完善&编码

    <你又怎么了我错了行了吧团队>第七次作业:团队项目完善&编码 项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十一 团队名称 你又怎么了我错了行了吧 作业学习 ...

  8. 旋转VR相机不头晕:一个反直觉的发现

    旋转VR相机不头晕:一个反直觉的发现 本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/deta ...

  9. OO第二单元总结——电梯调度问题

    一.设计策略. 在三次作业中,多线程程序的实现分以下几个步骤: 1. 主线程Main类的创建多个线程. 2. 共享对象的synchronized锁保证线程之间的互斥访问. 3. 采用notifyAll ...

  10. dubbo 部分 配置的关系-dubbo github 官方案例

    1.dubbo 有一个 dubbo.properties 作为默认配置 默认配置可以在不添加新的配置的前提下使用dubbo dubbo.properties 的内容(来自 https://github ...