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. cache(缓存)的作用

    cache的作用: 连接文件.内存与应用,为信息流在三者之间流动提供通道: 存储管理:对外与对内: 存取效率: 多线程: 一次存储:分批存储? 系统的缓存控制机制(虚拟内存)使用分段分页与命中机制. ...

  2. 基于vue项目的js工具方法汇总

    以下是个人过去一年在vue项目的开发过程中经常会用到的一些公共方法,在此进行汇总,方便以后及有需要的朋友查看~ let util = {}; /** * @description 日期格式化 * @p ...

  3. laravel 授权、用户验证

    记录帖 一.授权 只允许管理员删除用户,给管理员授权时,可以这样做,首先: 创建UserPolicy类: php artisan make:policy UserPolicy  然后在UserPoli ...

  4. [Codeforces 115E]Linear Kingdom Races

    题目大意: 有n块地,初始是荒地.你可以把某些荒地开垦(需要花费相应的价值\(a_i\)(正整数)),然后这些荒地就可以种田. 现在有m年,每年要在l到r区间内种田,获得p(正整数)的价值(必须保证l ...

  5. 使用python备份数据库并删除备份超过一定时长的文件

    #!/usr/bin/env python #-*- coding: utf-8 -*- """ @Project:Py @author:sandu @Email: sa ...

  6. oracle 的交并差函数,intersect;union;minus。

    创建表并添加数据: --创建TABLE_A create table TABLE_A ( A ), B ) ); --给TABLE_A添加数据 insert into TABLE_A values(' ...

  7. 一种神奇的双向循环链表C语言实现

    最近在看ucore操作系统的实验指导.里面提要一个双向循环链表的数据结构,挺有意思的. 其实这个数据结构本身并不复杂.在普通链表的基础上加一个前向指针,我们就得到了双向链表,再把头尾节点连起来就是双向 ...

  8. js数组并集,交集,差集

    js数组并集,交集,差集的计算方式汇总 一. new Set 方式实现 这种方式实现起来比较简单,原理就是参考new Set可以去重的功能 ,关于去重可以点击 https://www.haorooms ...

  9. javaScript 通过flie API读取本地文件

    File API是HTML5新增内容,依靠file和FileReader,这两个对象完成,代码如下: var fileInput = document.getElementById('test-ima ...

  10. document.documentElement与body下clientHeight,scrollHeight等区别

    本次说明仅在chrom环境下,ie等其他浏览器可能不同 1获取显示屏高度(pc和移动端,屏幕分辨率px) window.screen.height => 这个好理解,不多说. 2获取浏览器可视窗 ...