当前位置: 首页 > news >正文

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文件&#xff1a; <template><p style"font-size: 10px">{{time}}</p> </template> <script>export default{data () {return {time : ,flag : false}},mounted () {let time setInterval(() > {if (this.fla…...

缩放 对内外参的影响

当你对图像进行同比例缩小时&#xff0c;图像的内参需要相应地变化&#xff0c;但外参通常保持不变。 相机内参 相机内参&#xff08;内参矩阵&#xff09;描述了相机的固有属性&#xff0c;包括焦距和主点&#xff08;光轴与图像平面的交点&#xff09;的坐标。 当你对图像…...

SQL面试题2:留存率问题

引言 场景介绍&#xff1a; 在互联网产品运营中&#xff0c;用户注册量和留存率是衡量产品吸引力和用户粘性的关键指标&#xff0c;直接影响产品的可持续发展和商业价值。通过分析这些数据&#xff0c;企业可以了解用户行为&#xff0c;优化产品策略&#xff0c;提升用户体验…...

晨辉面试抽签和评分管理系统之九:随机编排考生的分组(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统&#xff08;下载地址:www.chenhuisoft.cn&#xff09;是公务员招录面试、教师资格考试面试、企业招录面试等各类面试通用的考生编排、考生入场抽签、候考室倒计时管理、面试考官抽签、面试评分记录和成绩核算的面试全流程信息化管理软件。提供了考生…...

【EtherCATBridge】- KRTS C++示例精讲(9)

EtherCATBridge示例讲解 文章目录 EtherCATBridge示例讲解结构说明代码说明 项目打开请查看【BaseFunction精讲】。 结构说明 EtherCATBridge.h &#xff1a;数据定义 EtherCATBridge.cpp &#xff1a;应用层源码 EtherCATBridge_dll.cpp &#xff1a;内核层源码 其余文件说明…...

C++实现设计模式--- 观察者模式 (Observer)

观察者模式 (Observer) 观察者模式 是一种行为型设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;使得当一个对象的状态发生改变时&#xff0c;其依赖者&#xff08;观察者&#xff09;会收到通知并自动更新。 意图 定义对象之间的一对多依赖关系。当一个对象状…...

iOS 解决两个tableView.嵌套滚动手势冲突

我们有这样一个场景&#xff0c;就是页面上有一个大的tableView&#xff0c; 每一个cell都是和屏幕一样高的&#xff0c;然后cell中还有一个可以 tableView&#xff0c;比如直播间的情形&#xff0c;这个时候如果我们拖动 cell里面的tableView滚动的话&#xff0c;如果滚动到内…...

Lianwei 安全周报|2025.1.13

新的一周又开始了&#xff0c;以下是本周「Lianwei周报」&#xff0c;我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件&#xff0c;保证大家不错过本周的每一个重点&#xff01; 政策/标准/指南最新动态 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端视频编辑解决方案,为企业打造专属的高效创作平台

在当今这个信息爆炸的时代&#xff0c;视频已成为不可或缺的重要内容形式&#xff0c;美摄科技推出了PC端视频编辑解决方案的私有化部署服务&#xff0c;旨在为企业提供一款量身定制的高效创作平台。 一、全面功能&#xff0c;满足企业多样化需求 美摄科技的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的稀疏视角重建工作&#xff0c;作者联合优化了相机内外参与GS模型&#xff0c;实验结果表明优于noposplat。 abstract 在本文中&#xff0c;提出了一种新颖的可泛化高斯方法 SmileSplat&#xff0c;可以对无约束&#xff08;未标定相机的&#xff09;稀疏多…...

电机控制的数字化升级:基于DSP和FPGA的仿真与实现

数字信号处理器&#xff08;DSP&#xff0c;Digital Signal Processor&#xff09;在工业自动化领域的应用日益广泛。DSP是一种专门用于将模拟信号转换成数字信号并进行处理的技术&#xff0c;能够实现信号的数字滤波、重构、调制和解调等多项功能&#xff0c;确保信号处理的精…...

1/14 C++

练习&#xff1a;将图形类的获取周长和获取面积函数设置成虚函数&#xff0c;完成多态 再定义一个全局函数&#xff0c;能够在该函数中实现&#xff1a;无论传递任何图形&#xff0c;都可以输出传递的图形的周长和面积 #include <iostream>using namespace std; class Sh…...

java springboot3.x jwt+spring security6.x实现用户登录认证

springboot3.x jwtspring security6.x实现用户登录认证 什么是JWT JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它用于在网络应用环境中传递声明。通常&#xff0c;JWT用于身份验证和信息交换。JWT的一个典型用法是…...

YOLOv5训练长方形图像详解

文章目录 YOLOv5训练长方形图像详解一、引言二、数据集准备1、创建文件夹结构2、标注图像3、生成标注文件 三、配置文件1、创建数据集配置文件2、选择模型配置文件 四、训练模型1、修改训练参数2、开始训练 五、使用示例1、测试模型2、评估模型 六、总结 YOLOv5训练长方形图像详…...

【2025最新】Poe保姆级订阅指南,Poe订阅看这一篇就够了!最方便使用各类AI!

1.Poe是什么&#xff1f; Poe, 全称Platform for Open Exploration。 Poe本身并不提供基础的大语言模型&#xff0c;而是整合多个来自不同科技巨头的基于不同模型的AI聊天机器人&#xff0c;其中包括来自OpenAI的ChatGPT&#xff0c;Anthropic的Claude、Google的PaLM&#xf…...

type1-100,2 words

dish n.餐具、碟&#xff0c;盘子&#xff1b;菜肴、饭菜&#xff08;指一顿餐食中的一道菜&#xff09; kind of 稍微&#xff1b;有点 sort of 稍微&#xff1b;有点儿 smallish adj.有点小的 crack 敲碎/裂&#xff0c;敲开&#xff0c;砸开&#xff0c;砸碎&#xff1b;裂开…...

Leetcode 377. 组合总和 Ⅳ 动态规划

原题链接&#xff1a;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) {// 每次都…...

零基础玩转AutoGLM-Phone-9B:图文语音多模态AI,5分钟快速部署指南

零基础玩转AutoGLM-Phone-9B&#xff1a;图文语音多模态AI&#xff0c;5分钟快速部署指南 1. AutoGLM-Phone-9B简介 1.1 什么是AutoGLM-Phone-9B AutoGLM-Phone-9B是一款专为移动设备优化的多模态AI模型&#xff0c;它能同时处理文字、图片和语音三种信息。想象一下&#xf…...

pygcn终极指南:解决图神经网络开发者最常遇到的10个核心问题

pygcn终极指南&#xff1a;解决图神经网络开发者最常遇到的10个核心问题 【免费下载链接】pygcn Graph Convolutional Networks in PyTorch 项目地址: https://gitcode.com/gh_mirrors/py/pygcn pygcn是一个基于PyTorch实现的图卷积网络&#xff08;GCN&#xff09;框架…...

TimesFM时间序列预测模型实战:从基础模型到高效部署的完整路径

TimesFM时间序列预测模型实战&#xff1a;从基础模型到高效部署的完整路径 【免费下载链接】timesfm TimesFM (Time Series Foundation Model) is a pretrained time-series foundation model developed by Google Research for time-series forecasting. 项目地址: https://…...

抖音视频批量下载终极指南:5分钟掌握免费去水印技巧

抖音视频批量下载终极指南&#xff1a;5分钟掌握免费去水印技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...

OpenClaw安全实践:Kimi-VL-A3B-Thinking本地化部署的数据边界保障

OpenClaw安全实践&#xff1a;Kimi-VL-A3B-Thinking本地化部署的数据边界保障 1. 为什么选择本地化部署&#xff1f; 去年夏天&#xff0c;我接手了一个医疗影像分析项目&#xff0c;需要处理大量患者CT扫描图像和诊断报告。最初尝试使用公有云API服务时&#xff0c;每次上传…...

电力系统稳定器与静态无功补偿器联合提升暂态稳定性Simulink仿真模型研究

使用电力系统稳定器&#xff08;PSS&#xff09;和静态无功补偿器&#xff08;SVC&#xff09;提高暂态稳定性的simulink仿真模型电力系统这玩意儿最怕的就是突然来个大扰动&#xff0c;比如短路故障或者大负荷切换。这时候发电机的功角曲线要是收不住&#xff0c;分分钟全网停…...

面向对象分析模型深入分析

面向对象分析模型深入分析 面向对象分析(Object-Oriented Analysis, OOA)是系统分析师在需求阶段的核心工作方法。它强调从问题域中的客观实体出发,以“对象”为基本单元建立业务模型,而不是从功能或数据流出发。下面从核心概念、三大模型、建模流程到实战案例进行全面解析…...

嵌入式ONPS协议栈:轻量级TCP/IP实现与优化

1. ONPS协议栈概述ONPS是一款专为资源受限的嵌入式系统设计的开源网络协议栈&#xff0c;由国内开发者完全自主开发实现。作为一名长期从事嵌入式网络开发的工程师&#xff0c;我第一次接触ONPS时就对其轻量级设计和完整的功能实现印象深刻。与常见的LwIP等协议栈相比&#xff…...

[特殊字符] iONSPlayer 发布,ONScripter游戏的iOS模拟器

&#x1f3ae; iONSPlayer 发布&#xff0c;ONScripter游戏的iOS模拟器 阿丰在长春 一只特立独行的丰子 什么是 iONSPlayer&#xff1f;继承自ONSPlayer&#xff01; iONSPlayer 是一款运行在 iOS 设备上的 ONScripter 引擎模拟器。 简单来说&#xff0c;它可以让你在 iPhon…...

OpenClaw爆火!Token是什么?一文搞懂这个AI核心概念!

随着龙虾OpenClaw这几天的爆火&#xff0c;token也成了高频词。“养龙虾”并不是免费的&#xff0c;OpenClaw需要接入大模型&#xff0c;平时各种操作都要消耗token 最近网上还有一个很好笑的梗&#xff1a;用自己的脑子思考不会消耗token那么token究竟是什么&#xff1f;我在O…...