vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。
1.创建countdown.vue文件:
<template><p style="font-size: 10px">{{time}}</p>
</template>
<script>export default{data () {return {time : '',flag : false}},mounted () {let time = setInterval(() => {if (this.flag == true) {clearInterval(time);}this.timeDown();}, 500);},props : {endTime : {type: String},index : {type: Number}},methods : {timeDown () {const endTime = new Date(this.endTime);const nowTime = new Date();let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);let d = parseInt(leftTime / (24 * 60 * 60));let h = this.formate(parseInt(leftTime / (60 * 60) % 24));let m = this.formate(parseInt(leftTime / 60 % 60));let s = this.formate(parseInt(leftTime % 60));if(leftTime <= 0){this.flag = true;this.time = '00:00:00';//在这里传给父组件leftTime,全局传递的话倒计时没结束会有很多数据。this.$emit('update:leftTime', this.time,this.index);}else{this.time = `${d}:${h} :${m} :${s} `; }},formate(time) {if (time >= 10) {return time;} else {return `0${time}`;}}}}
</script>
<style scoped>
</style>
2.在页面中使用该组件:
根据循环项的index控制类名显示与否,index%2==0 偶数项,反则奇数项。endTimeStatus[index]倒计时结束的项。
<template>
....
<div :class="index%2==0 ? (endTimeStatus[index] ? 'roomitem-end' : 'roomitem') : (endTimeStatus[index]? 'roomitem-end' : 'roomitem2')" v-for="(item,index) in RoomList" :key="item.id" @click="goroom(item.id)"><countdown :endTime='item.end_time' :index='index' @update:leftTime="parentMethod"></countdown></div>
....
</template><script>
import countdown from "./countdown.vue";
export default {components: {countdown},methods: {parentMethod(leftTime, index) {// 操作倒计时组件传递过来的参数this.itemLeftTimes[index] = leftTime;this.endTimeStatus[index] = true;//一定要刷新RoomList数据this.GetRooms();},
}
相关文章:
vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。
1.创建countdown.vue文件: <template><p style"font-size: 10px">{{time}}</p> </template> <script>export default{data () {return {time : ,flag : false}},mounted () {let time setInterval(() > {if (this.fla…...
缩放 对内外参的影响
当你对图像进行同比例缩小时,图像的内参需要相应地变化,但外参通常保持不变。 相机内参 相机内参(内参矩阵)描述了相机的固有属性,包括焦距和主点(光轴与图像平面的交点)的坐标。 当你对图像…...
SQL面试题2:留存率问题
引言 场景介绍: 在互联网产品运营中,用户注册量和留存率是衡量产品吸引力和用户粘性的关键指标,直接影响产品的可持续发展和商业价值。通过分析这些数据,企业可以了解用户行为,优化产品策略,提升用户体验…...
晨辉面试抽签和评分管理系统之九:随机编排考生的分组(以教师资格考试面试为例)
晨辉面试抽签和评分管理系统(下载地址:www.chenhuisoft.cn)是公务员招录面试、教师资格考试面试、企业招录面试等各类面试通用的考生编排、考生入场抽签、候考室倒计时管理、面试考官抽签、面试评分记录和成绩核算的面试全流程信息化管理软件。提供了考生…...
【EtherCATBridge】- KRTS C++示例精讲(9)
EtherCATBridge示例讲解 文章目录 EtherCATBridge示例讲解结构说明代码说明 项目打开请查看【BaseFunction精讲】。 结构说明 EtherCATBridge.h :数据定义 EtherCATBridge.cpp :应用层源码 EtherCATBridge_dll.cpp :内核层源码 其余文件说明…...
C++实现设计模式--- 观察者模式 (Observer)
观察者模式 (Observer) 观察者模式 是一种行为型设计模式,它定义了一种一对多的依赖关系,使得当一个对象的状态发生改变时,其依赖者(观察者)会收到通知并自动更新。 意图 定义对象之间的一对多依赖关系。当一个对象状…...
iOS 解决两个tableView.嵌套滚动手势冲突
我们有这样一个场景,就是页面上有一个大的tableView, 每一个cell都是和屏幕一样高的,然后cell中还有一个可以 tableView,比如直播间的情形,这个时候如果我们拖动 cell里面的tableView滚动的话,如果滚动到内…...
Lianwei 安全周报|2025.1.13
新的一周又开始了,以下是本周「Lianwei周报」,我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件,保证大家不错过本周的每一个重点! 政策/标准/指南最新动态 01 美国国土安全部发布《公共部门生成式人工智能部署手…...
rtthread学习笔记系列(2) -- 宏
文章目录 2.链接文件2.0. 参考链接2.1._stext 和 _etext2.2. "."与"*符号作用2.3..linkonce 段2.4. KEEP2.5 ENTRY2.6 PROVIDE2.7 AT2.8 SORT2.9 NOLOAD 源文件路径:https://github.com/wdfk-prog/RT-Thread-Study 2.链接文件 2.0. 参考链接 https://home.cs…...
美摄科技PC端视频编辑解决方案,为企业打造专属的高效创作平台
在当今这个信息爆炸的时代,视频已成为不可或缺的重要内容形式,美摄科技推出了PC端视频编辑解决方案的私有化部署服务,旨在为企业提供一款量身定制的高效创作平台。 一、全面功能,满足企业多样化需求 美摄科技的PC端视频编辑解决…...
服务端开发模式-thinkphp-重新整理workman
一、登录接口 <?php /*** 登录退出操作* User: 龙哥三年风水* Date: 2024/10/29* Time: 15:53*/ namespace app\controller\common; use app\controller\Emptys; use app\model\permission\Admin; use app\model\param\System as SystemModel; use Email\EmailSender; use…...
HTB:Access[WriteUP]
目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 尝试匿名连接至…...
【论文笔记】SmileSplat:稀疏视角+pose-free+泛化
还是一篇基于dust3r的稀疏视角重建工作,作者联合优化了相机内外参与GS模型,实验结果表明优于noposplat。 abstract 在本文中,提出了一种新颖的可泛化高斯方法 SmileSplat,可以对无约束(未标定相机的)稀疏多…...
电机控制的数字化升级:基于DSP和FPGA的仿真与实现
数字信号处理器(DSP,Digital Signal Processor)在工业自动化领域的应用日益广泛。DSP是一种专门用于将模拟信号转换成数字信号并进行处理的技术,能够实现信号的数字滤波、重构、调制和解调等多项功能,确保信号处理的精…...
1/14 C++
练习:将图形类的获取周长和获取面积函数设置成虚函数,完成多态 再定义一个全局函数,能够在该函数中实现:无论传递任何图形,都可以输出传递的图形的周长和面积 #include <iostream>using namespace std; class Sh…...
java springboot3.x jwt+spring security6.x实现用户登录认证
springboot3.x jwtspring security6.x实现用户登录认证 什么是JWT JWT(JSON Web Token)是一种开放标准(RFC 7519),它用于在网络应用环境中传递声明。通常,JWT用于身份验证和信息交换。JWT的一个典型用法是…...
YOLOv5训练长方形图像详解
文章目录 YOLOv5训练长方形图像详解一、引言二、数据集准备1、创建文件夹结构2、标注图像3、生成标注文件 三、配置文件1、创建数据集配置文件2、选择模型配置文件 四、训练模型1、修改训练参数2、开始训练 五、使用示例1、测试模型2、评估模型 六、总结 YOLOv5训练长方形图像详…...
【2025最新】Poe保姆级订阅指南,Poe订阅看这一篇就够了!最方便使用各类AI!
1.Poe是什么? Poe, 全称Platform for Open Exploration。 Poe本身并不提供基础的大语言模型,而是整合多个来自不同科技巨头的基于不同模型的AI聊天机器人,其中包括来自OpenAI的ChatGPT,Anthropic的Claude、Google的PaLM…...
type1-100,2 words
dish n.餐具、碟,盘子;菜肴、饭菜(指一顿餐食中的一道菜) kind of 稍微;有点 sort of 稍微;有点儿 smallish adj.有点小的 crack 敲碎/裂,敲开,砸开,砸碎;裂开…...
Leetcode 377. 组合总和 Ⅳ 动态规划
原题链接:Leetcode 377. 组合总和 Ⅳ 可参考官解 class Solution { public:int combinationSum4(vector<int>& nums, int target) {vector<int> dp(target 1);dp[0] 1;// 总和为 i 的元素组合的个数for (int i 1; i < target; i) {// 每次都…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...
