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

vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。

news 来源：原创 2025/6/8 1:45:23

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…...

编程日记 2025/6/3 7:31:25

nvim 打造成可用的IDE(2)

上一个文章写的太长了， 后来再写东西就一卡一卡的，所以新开一个。主要是关于 bufferline的。之前我的界面是这样的。这个图标很不舒服有。后来发现是在这里进行配置。我也不知道，这个配置我是从哪抄过来的。测试结果&#xff1…...

编程日记 2025/6/4 1:12:19

Spring Boot教程之五十五：Spring Boot Kafka 消费者示例

Spring Boot Kafka 消费者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架，使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序，您可…...

编程日记 2025/6/4 1:11:13

目标检测跟踪中的Siamese孪生网络与普通卷积网络(VGG、ResNet)有什么区别？

1、什么是Siamese网络？ Siamese网络又叫孪生网络，是一种特殊的神经网络架构，由一对（或多对）共享参数的子网络组成，用于学习输入样本之间的相似性或关系。最早在 1994 年由 Bromley 等人提出，最…...

编程日记 2025/6/4 1:12:03

AIGC时代 | 探索AI Agent的奥秘：四种设计模式引领未来智能趋势

AIGC时代 | 探索AI Agent的奥秘：四种设计模式引领未来智能趋势引言随着人工智能（AI）技术的飞速发展，AI Agent作为新一代的智能代理，正在引领工作流程的革新。AI Agent，即人工智能代理，是一种…...

编程日记 2025/6/4 16:36:24

PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统

基于深度学习YOLOv5神经网络水果蔬菜检测识别系统，其能识别的水果蔬菜有15种，# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...

编程日记 2025/6/3 7:27:02

【redis】redis-cli命令行工具的使用

redis-cli命令行工具是一个功能强大的Redis客户端，它允许用户与Redis数据库进行交互和管理。以下是一些常用参数的使用说明： 基本连接参数 -h, --host <hostname>：指定要连接的Redis服务器的主机名或IP地址。如果未指定，…...

编程日记 2025/5/30 19:26:47

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启更新镜像源安装环境配置加速卸载安装pull拉取加速开机自启更新镜像源 # dnf update：更新所有已安装的软件包。 sudo dnf update -y安装环境 # 安装环境 # yum-utils：提供了管理yum仓库的工具。…...

编程日记 2025/6/3 13:08:49

Grails应用http.server.requests指标数据采集问题排查及解决

问题遇到的问题：同一个应用，Spring Boot(Java)和Grails(Groovy)混合编程，常规的Spring Controller，可通过Micromete Pushgateway， 采集到http.server.requests指标数据，注意下面的指标名称是点号&#…...

编程日记 2025/6/2 23:11:54

使用 WPF 和 C# 将纹理应用于三角形

此示例展示了如何将纹理应用于三角形，以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …...

编程日记 2025/6/4 2:16:19

【vue3项目使用 animate动画效果】

vue3项目使用 animate动画效果前言一、下载或安装npm 安装二、引入组件三、复制使用四、完整使用演示总结前言提示：干货篇，不废话，点赞收藏，用到会后好找藕~ 点击这里，直接看官网哦 👉 官网地址&#…...

编程日记 2025/6/4 2:16:51

C#中颜色的秘密

颜色的秘密: 颜色Color是一个调色板, 所有颜色都是由透明度Alpha,红Red,绿Green,蓝Blue按不同比例调色混合而成,如果不考虑透明度Alpha,颜色共有256*256*25616777216种 ColorARGB A,R,G,B都为byte型[8位],因此可以用整体的32个整数[Int32]来表示一种颜色 Color 所属命名空…...

编程日记 2025/6/4 2:17:23

Spring AI 从入门到实践

Spring AI 从入门到实践 1.什么是Spring AI 2.使用Spring Boot&Spring AI快速构建AI应用程序 3.ChatClient&Chat Model简化与AI模型的交互 4.Spring AI Prompt:与大模型进行有效沟通 5.结构化输出大模型响应 6.实战:AI聊天机器人 Ben技术站关注Java技术&#x…...

编程日记 2025/6/4 2:16:35

服务器一次性部署One API + ChatGPT-Next-Web

服务器一次性部署One API ChatGPT-Next-Web One API ChatGPT-Next-Web 介绍One APIChatGPT-Next-Web docker-compose 部署One API ChatGPT-Next-WebOpen API docker-compose 配置ChatGPT-Next-Web docker-compose 配置docker-compose 启动容器后续配置同步发布在个人笔记服…...

编程日记 2025/6/4 16:20:39

milvus过滤功能

数据格式： [{"id": 0, "vector": [0.3580376395471989, -0.6023495712049978, 0.18414012509913835, -0.26286205330961354, 0.9029438446296592], "color": "pink_8682", "likes": 165},{"id": 1, "vecto…...

编程日记 2025/6/3 7:44:31

JavaScript系列（25）--性能优化技术详解

JavaScript性能优化技术详解 ⚡ 今天，让我们深入探讨JavaScript的性能优化技术。掌握这些技术对于构建高性能的JavaScript应用至关重要。性能优化基础 🌟 💡 小知识：JavaScript性能优化涉及多个方面，包括代码执行效…...

编程日记 2025/6/2 13:22:20

基于vite+vue3+mapbox-gl从零搭建一个项目

下面是基于 Vite、Vue 3 和 Mapbox GL 从零搭建一个项目的完整步骤，包括环境搭建、依赖安装、配置和代码示例。 1. 初始化项目首先，使用 Vite 快速创建一个 Vue 3 项目： npm create vuelatest vue3-mapboxgl --template vue cd vue3-mapbo…...

编程日记 2025/6/3 0:42:55

驱动开发系列33 - Linux Graphics mesa Intel驱动介绍

一：概述 mesa 中的 Intel 驱动体系是为支持 Intel GPU 提供图形 API 的硬件实现部分，主要包括 OpenGL、Vulkan等图形接口，Intel驱动实现整体上分为四层：第一层：API 层，实现 OpenGL 和 Vulkan 接口, src/mesa/main、src/vulkan。第二层：驱动层，实现 OpenGL 和 Vulkan…...

编程日记 2025/6/3 7:44:15

【git】-3 github创建远程仓库,上传自己的项目，下载别人的项目

一、如何使用Github 1、创建远程仓库 2、使用github拉取/推送代码克隆仓库向远程仓库推送代码-git push 二、上传我们自己的项目到github 方法一：直接上传方法二：使用git命令方法三： 将仓库拉取到本地上传三、下载别人的项目 …...

编程日记 2025/6/3 7:45:03

[Qt]常用控件介绍-多元素控件-QListWidget、QTableWidget、QQTreeWidget

目录 1.多元素控件介绍 2.ListWidget控件属性核心方法核心信号细节 Demo：编辑日程 3.TableWidget控件核心方法 QTableWidgetItem核心信号 QTableWidgetItem核心方法细节 Demo：编辑学生信息 4.TreeWidget控件核心方法核心信号…...

编程日记 2025/6/3 7:45:22

_STM32关于CPU超频的参考_HAL

MCU: STM32F407VET6 官方最高稳定频率：168MHz 工具：STM32CubeMX 本篇仅仅只是提供超频（默认指的是主频）的简单方法，并未涉及STM32超频极限等问题。原理很简单，通过设置锁相环的倍频系数达到不同的频率&am…...

编程日记 2025/6/3 0:22:21

Flink链接Kafka

一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置： 代码通过 FlinkKafkaProducer 创建 Kafka 生产者，用于向 Kafka 主题发送消息。Flink 执行环境的配置： 配置了 Flink 的检查点机制，确保消息的可靠性，支…...

编程日记 2025/6/3 7:44:47

Maven 配置本地仓库

步骤 1：修改 Maven 的 settings.xml 文件找到你的 Maven 配置文件 settings.xml。 Windows: C:\Users\<你的用户名>\.m2\settings.xmlLinux/macOS: ~/.m2/settings.xml 打开 settings.xml 文件，找到 <localRepository> 标签。如果没有该标…...

编程日记 2025/6/3 7:43:43

【PHP】双方接口通信校验服务

请求方使用 ApiAuthService::buildUrl($domain, [terminal => 1, ts => time()]); //http://域名/adminapi/login/platformLogin?sign=F7FE8A150DEC18BE8A71C5059742C81A&terminal=1&ts=1736904841接收方 $getParams = $this->request->get();$validate…...

编程日记 2025/5/30 17:00:06

mac 安装docker

1、下载docker 进入 /Applications/Docker.app/Contents/MacOS/Docker Desktop.app/Contents/Resources目录把app.asar 文件备份将下载的中文包复制进去。修改成一样的名字 [汉化包下载地址](https://github.com/asxez/DockerDesktop-CN)...

编程日记 2025/6/3 14:55:16

ANSYS Fluent学习笔记（七）求解器四部分

16.亚松弛因子 Controls面板里面设置，它能够稳定计算的过程。如果采用常规的迭代算法可能结果就会发生振荡的情况。采用亚松驰因子可以有助于残差的稳定。他的取值范围是0-1，0代表没有亚松驰，1表示物理量变化很快，一般情况下取…...

编程日记 2025/6/3 14:55:01

【微服务】面试 3、服务监控 SkyWalking

微服务监控的原因问题定位：在微服务架构中，客户端（如 PC 端、APP 端、小程序等）请求后台服务需经过网关再路由到各个微服务，服务间可能存在多链路调用。当某一微服务挂掉时，在复杂的调用链路中难以迅速确定…...

编程日记 2025/6/3 16:00:53

llamafactory使用8张昇腾910b算力卡lora微调训练qwen2-72b大模型

说明我需要在昇腾服务器上对Qwen2-72B大模型进行lora微调，改变其自我认知。我的环境下是8张910B1卡。显存约512GB。准备：安装llamafactory 请参考官方方法安装llamafactory：https://github.com/hiyouga/LLaMA-Factory 特别强调下&…...

编程日记 2025/6/3 14:56:39

在服务器上增加新网段IP的路由配置

在服务器上增加新网段IP的路由配置前提条件步骤一：检查当前路由表步骤二：添加新路由步骤三：验证新路由步骤四：持久化路由配置脚本示例结论在网络管理中，路由配置是一项基本且重要的任务。它决定了数据包在网络中的传输路径。本文将详细介绍如何在服务器上增加新的路由配置…...

编程日记 2025/6/2 23:21:15

2Spark Core

2Spark Core 1.RDD 详解1) 为什么要有 RDD?2) RDD 是什么?3) RDD 主要属性 2.RDD-API1) RDD 的创建方式2) RDD 的算子分类3) Transformation 转换算子4) Action 动作算子 3. RDD 的持久化/缓存4. RDD 容错机制 Checkpoint5. RDD 依赖关系1) 宽窄依赖2) 为什么要设计宽窄依赖 …...

编程日记 2025/6/3 14:55:32

【ANGULAR网站开发】初始环境搭建（SpringBoot）

1. 初始化SpringBoot 1.1 创建SpringBoot项目清理spring-boot-starter-test，有需要的可以留着 1.2 application.properties 将application.properties改为yaml，个人习惯问题，顺便设置端口8888，和前端设置的一样 server:por…...

编程日记 2025/6/3 14:56:04

Vue 页面布局组件-Vuetify、Semantic

在现代 Web 开发中，用户体验是关键，尤其是当我们利用 Vue.js 框架构建用户友好的界面时。今天，我们将深入探讨如何使用 Vuetify 和 Semantic UI 来创建高效、美观的页面布局组件。通过这项技术，你将能够为用户呈现一个流畅的交互体…...

编程日记 2025/6/3 14:56:55

小程序组件 —— 31 事件系统 - 事件绑定和事件对象

小程序中绑定事件和网页开发中绑定事件几乎一致，只不过在小程序不能通过 on 的方式绑定事件，也没有 click 等事件，小程序中绑定事件使用 bind 方法，click 事件也需要使用 tap 事件来进行代替，绑定事件的方式有两种&…...

编程日记 2025/6/3 14:55:48

23种设计模式

23种设计模式创建型模式（Creational Patterns）结构型模式（Structural Patterns）行为型模式（Behavioral Patterns）总结 Java中的设计模式是解决特定问题的通用、可复用的解决方案。它们不是完成代码&#x…...

编程日记 2025/6/3 0:44:21

SIBR详细介绍：基于图像的渲染系统及3DGS实例展示【3DGS实验复现】

文章目录什么是 SIBR？IBR 技术的优势SIBR 的核心组件SIBR 的应用场景如何使用 SIBR？3D Gaussian Splatting 实验实例展示1. 什么是 3D Gaussian Splatting (3DGS)？2. 实验运行环境步骤：简要说明如何使用 3DGS 的两种渲染方式 3. …...

编程日记 2025/5/31 23:08:28

每天五分钟深度学习框架pytorch：基于vgg块搭建VGG卷积神经网络

本文重点前面我们使用pytorch搭建了vgg块，本文我们使用vgg块搭建卷积神经网络VGG16，我们先来看一下vgg16的模型结构是什么样的：搭建vgg16 import torch from torch import nn def vgg_block(num_convs,in_channels,out_channels): net=[nn.Conv2d(in_channels,out_channe…...

编程日记 2025/6/4 12:23:26

【gin】中间件使用之jwt身份认证和Cors跨域，go案例

Gin-3 中间件编程及 JWT 身份认证 1. Gin 中间件概述中间件是处理 HTTP 请求的函数，可以在请求到达路由处理函数之前或之后对请求进行处理。在 Gin 框架中，中间件常用于处理日志记录、身份验证、权限控制等功能。 router : gin.Default() router.Us…...

编程日记 2025/6/4 13:23:28

探索 Vue.js 组件开发的新边界：动态表单生成技术

随着前端技术的飞速发展，Vue.js 作为一款灵活、易用且性能优异的框架，一直是开发者心中的不二之选。本文将深入介绍 Vue.js 组件开发中的最新技术之一：动态表单生成技术，并通过具体实例展示如何实现这一高效技术。为什么选择动态…...

编程日记 2025/5/30 16:58:56

Android 调用系统服务接口获取屏幕投影(需要android.uid.system)

媒体投影借助 Android 5（API 级别 21）中引入的 android.media.projection API，您可以将设备屏幕中的内容截取为可播放、录制或投屏到其他设备（如电视）的媒体流。 Android 14（API 级别 34）引入…...

编程日记 2025/6/3 18:43:02

Node.js - Express框架

1. 介绍 Express 是一个基于 Node.js 的 Web 应用程序框架，主要用于快速、简便地构建 Web 应用程序和 API。它是目前最流行的 Node.js Web 框架之一，具有轻量级、灵活和功能丰富的特点。核心概念包括路由，中间件，请求与响应&a…...

编程日记 2025/6/2 11:24:59

Picocli 命令行框架

官方文档 https://picocli.info/ 官方提供的快速入门教程 https://picocli.info/quick-guide.html 使用 Picocli 创建命令行应用程序 Picocli 是一个用于构建 Java 命令行应用的强大框架，它简化了参数解析和帮助消息生成的过程。下面是如何使用 Picocli 构建简单命…...

编程日记 2025/6/3 10:36:39

Vscode——SSH连接不上的一种解决办法

一、完整报错： > @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ > IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! > Someone could be eavesdropping on you right now (man-in-the...

编程日记 2025/5/29 18:44:14

Stream流

一 : Stream流的介绍 stream不存储数据，而是按照特定的规则对数据进行计算，一般会输出结果； stream不会改变数据源，通常情况下会产生一个新的集合； stream具有延迟执行特性，只有调用终端操作时&#xff…...

编程日记 2025/5/30 10:21:07

开源文件存储分享平台Seafile部署与应用

Seafile 是一款开源的企业云盘，注重可靠性和性能，支持全平台客户端。Seafile 内置协同文档 SeaDoc ，让协作撰写、管理和发布文档更便捷。适用于团队协作、文件存储和同步的开源解决方案，它提供了可靠、安全和易用的云存储服务。主要有以下特点：文件存储和同步：Seafile 允…...

编程日记 2025/6/4 10:02:01

RAG技术：是将知识库的文档和问题共同输入到LLM中

RAG技术 RAG技术是将知识库的文档和问题共同输入到LLM中 RAG技术是先从知识库中检索出与问题相关的文档片段，然后将这些检索到的文档片段与问题一起输入到LLM中进行回答。具体过程如下：文本分块由于LLM的上下文窗口有限，需要将长文本资料分割成较小的块，以便LLM能够有…...

编程日记 2025/6/3 8:36:25

战略与规划方法——深入解析波士顿矩阵（BCG Matrix）：分析产品组合的关键工具

深入解析波士顿矩阵（BCG Matrix）：分析产品组合的关键工具在现代商业管理中，合理地分析和管理产品组合对于企业的成功至关重要。波士顿矩阵（BCG Matrix），又称为成长份额矩阵，是一种由波士顿咨询集团（Boston Consulting Group）在20世纪70年代提出的战略工具，用于帮助…...

编程日记 2025/6/3 7:54:46

GORM（Go语言数据交互库）

GORM（Go ORM，即对象关系映射）是Go语言中非常流行且功能强大的数据库交互库。它简化了与关系型数据库的交互过程，提供了丰富的API来处理各种数据库操作。下面将详细介绍GORM的功能、使用方法和一些高级特性。 1. 安装首先&#…...

编程日记 2025/5/31 22:53:40

Spring Boot教程之五十七：在 Apache Kafka 上发布 JSON 消息

Spring Boot | 如何在 Apache Kafka 上发布 JSON 消息 Apache Kafka是一个发布-订阅消息系统。消息队列允许您在进程、应用程序和服务器之间发送消息。在本文中，我们将了解如何在 Spring Boot 应用程序中向 Apache Kafka 发送 JSON 消息。为了了解如何创建 Spring…...

编程日记 2025/6/4 6:30:41

开发指南091-延迟退休算法

公布平台上人力资源系统有关延迟退休算法： package org.qlm.util;public class busiUtil {/*birthYearMonth 出生年月 yyyy-MMmode 0 男职工 1 女干部 2 女职工*/public static String calculateRetirementDate(String birthYearMonth, String mode){if ("0&…...

编程日记 2025/6/4 6:29:38

Flask-SQLAlchemy 基于一个base表 - 动态创建使用相同字段的其他业务表

1 安装首先，确保您安装了 Flask 和 SQLAlchemy，以及 MySQL 的驱动程序（例如 mysql-connector-python 或 PyMySQL）： pip install Flask Flask-SQLAlchemy mysql-connector-python2 创建项目结构创建一个简单的项目…...

编程日记 2025/6/4 6:30:09

相关文章：