vue列表数据倒计时存在的一些坑
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列表数据倒计时存在的一些坑的更多相关文章
- 解决ie下vue列表数据不能即时刷新的问题
项目上要兼容IE浏览器(客户要求),发现之前在谷歌浏览器下,操作(增删改查)列表后列表能即时刷新(双向绑定),IE下却不行. 自己调试一下发现,在IE11下,如果GET请求请求相同的URL,默认会使用 ...
- 使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue
[前言] 使用vue处理项目中遇到列表页面时,之前项目中总会有一些细节问题处理得不太好,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法 ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 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 基本知 ...
- T-SQL Recipes之生成动态列表数据
Problem 首先什么是动态列表?举个示例,假设你想输出以逗号分隔的IDs,如: 1,45,67,199,298 Solution 生成动态列表数据在我们生活场景中很常见,比如在 Dynamic P ...
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
随机推荐
- 工作需求——VBA操作打印机
因为最近做的事情比较多,平时也多用EXCEL,所以顺便学习EXCEL的功能性的东西 转载:https://msdn.microsoft.com/zh-tw/vba/excel-vba/articles ...
- Pyhton学习——Day39
# CSS的常用属性# 1 颜色属性# <div style="color:rgb(255,0,0)">ppppp</div># 2 字体属性# font- ...
- idea编写Swing程序中文乱码的解决办法
Run -> Edit Configurations ,在图示位置加入-Dfile.encoding=gbk
- vi 编辑器的日常使用
命令行模式: 光标管理 text 屏幕 行 单词 gg 跳转到文档头部 H 跳转到屏幕首行 ^ 或 数字0 跳转到行首 w 向前 G 跳转到文档尾部 M 跳转到屏幕中行 $ 跳转到行尾 b 向后 ...
- python 网络编程 粘包问题
1.粘包现象 TCP粘包是指发送方发送的若干包数据到接收方接收时粘成一包,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾. 粘包出现原因 使用了优化方法(Nagle算法),将多次间隔较小.数据 ...
- FastDFS架构
1.什么是 FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用Fas ...
- vim 跳转指定行
在编辑模式下输入 ngg 或者 nG n为指定的行数(如25) 25gg或者25G 跳转到第25行. 在命令模式下输入行号n : n 如果想打开文件即跳转 vim +n FileName 查看当然光标 ...
- .C#-NET开源方向基本
我的理解,nancyFx是一个.net的微型框架,可以在Linux环境下运行,ServiceStack也是全平台框架,更大一些 owin的概念:Open Web Server Interface Fo ...
- cogs 2060. 除法表达式
2060. 除法表达式 ★★ 输入文件:baoquansl.in 输出文件:baoquansl.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 经过无尽的蘑菇和 ...
- HDU 4089
很容易列出方程 设dp[i][j]为排在第i位置,总共有j个人排队到达目标状态的概率 i=1 dp[i][j]=p4+p1*dp[i][j]+p2*dp[j][j] 2<=i<=k dp[ ...