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. iOS9 & Xcode7 下设置LaunchImage启动图片 问题及解决

    最近在学习iOS开发,碰到一个设置启动图片的问题,怎么也搞不定,综合网上种种资料后Done,现在把完整过程写一下. 这里以建立一个空的Single View Application 为演示基础. 1. ...

  2. Pyhton学习——Day9(阶段性练习)

    # 1.文件内容如下,标题为:姓名,性别,年纪,薪资## egon male 18 3000# alex male 38 30000# wupeiqi female 28 20000# yuanhao ...

  3. ZOJ 1081 Points Within( 判断点在多边形内外 )

    链接:传送门 题意:给出n个点围成的一个多边形,现在有m个点p,询问p是否在多边形内,你可以认为这些点均不同且输入的顶点是多边形中相邻的两个顶点,最后的顶点与第一个相邻并且每一个顶点都连接两条边( 左 ...

  4. Windows 10快速在指定目录打开命令行

    一.我们在想要到达的目录上按住shift键并点击鼠标右键.看到了吗,这时候在弹出菜单里多了一个选项,就是"在此处打开命令窗口",我们点开看一下. 二.不过有时候我们需要以管理员的权 ...

  5. Shiro:初识Shiro及简单尝试

    Shiro 一.什么是Shiro Apache Shiro是Java的一个安全(权限)框架 作用:认证.授权.加密.会话管理.与web集成.缓存等 下载地址:http://shiro.apache.o ...

  6. codevs 1803 志愿者招募

    1803 志愿者招募 2008年NOI全国竞赛  时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master   题目描述 Description 申奥成功后,布布经过不懈努 ...

  7. angular-Scope

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 当你在 Ang ...

  8. [AngularJS]Chapter 1 AnjularJS简介

    创建一个完美的Web应用程序是很令人激动的,但是构建这样应用的复杂度也是不可思议的.我们Angular团队的目标就是去减轻构建这样AJAX应用的复杂度.在谷歌我们经历过各种复杂的应用创建工作比如:GM ...

  9. HDU 4303 Contest 1

    说实话,挺复杂的一道题. 我采用栈的方式,DFS在搜索完一个节点的所有子结点后,通过排序,加快计算该结点所有可能的路径:子结点与子结点的连通,子结点与父结点的连通,通过父结点与各祖先结点的连通.同时记 ...

  10. Woody的Python学习笔记2

    Python多行语句 Python语句中一般以新行作为语句的结束符.但我们能够使用斜杠(\)将一行的语句分为多行显示,例如以下所看到的: total = item_one+\ item_two + \ ...