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

vue中动态出来返回的时间秒数,在多少范围显示多少秒,多少范围显示分,小时等等

在Vue中,你可以使用计算属性(computed property)或过滤器(filter)来根据动态返回的时间秒数来显示不同的时间单位,比如秒、分、小时等等。

下面是一个使用计算属性的示例:

<template><div><p>{{ formatTime(seconds) }}</p></div>
</template><script>
export default {data() {return {seconds: 12345, // 动态返回的时间秒数};},computed: {formatTime() {return function (seconds) {if (seconds < 60) {return `${seconds}秒`;} else if (seconds < 3600) {const minutes = Math.floor(seconds / 60);return `${minutes}分`;} else if (seconds < 86400) {const hours = Math.floor(seconds / 3600);return `${hours}小时`;} else {const days = Math.floor(seconds / 86400);return `${days}天`;}};},},
};
</script>

const formatTS = (seconds) => {if (seconds < 60) {return `${seconds}秒`;} else if (seconds < 3600) {const minutes = Math.floor(seconds / 60);return `${minutes}分`;} else if (seconds < 86400) {const hours = Math.floor(seconds / 3600);return `${hours}小时`;} else {const days = Math.floor(seconds / 86400);return `${days}天`;}
};

 示例

在上面的代码中,我们定义了一个计算属性​​formatTime​​,它接受一个参数​​seconds​​,根据​​seconds​​的值来返回相应的时间单位。如果​​seconds​​小于60,返回秒;如果​​seconds​​小于3600,返回分;如果​​seconds​​小于86400,返回小时;否则返回天。

http://www.lryc.cn/news/273977.html

相关文章:

  • English: go through customs
  • Nginx 多端口部署多站点
  • 从零开始配置kali2023环境:配置jupyter的多内核环境
  • Dart调用JS对10000条定位数据滤波
  • 大模型应用实践:AIGC探索之旅
  • 【.NET Core】异步编程模式
  • macOS通过外置驱动器备份数据
  • rtsp解析视频流
  • 【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第3节-云产品流转配置
  • Spring Cloud Config相关问题及答案(2024)
  • 【Azure 架构师学习笔记】- Azure Databricks (4) - 使用Azure Key Vault 管理ADB Secret
  • [每周一更]-(第50期):Go的垃圾回收GC
  • 【嵌入式学习笔记-01】什么是UC,操作系统历史介绍,计算机系统分层,环境变量(PATH),错误
  • 【动态规划】LeetCode-10. 正则表达式匹配
  • lenovo联想拯救者8.8英寸掌上游戏机Legion Go 8APU1(83E1)原装出厂Windows11预装系统
  • 经典目标检测YOLO系列(一)复现YOLOV1(4)VOC2007数据集的读取及预处理
  • Android Studio xml布局代码补全功能失效问题
  • 算法每日一题:队列中可以看到的人数 | 单调栈
  • 报表控件Stimulsoft 2023回顾:都做了哪些产品的改变?
  • Mybatis缓存实现方式
  • C#用StringBuilder高效处理字符串
  • python开发案例教程-清华大学出版社(张基温)答案(4.2)
  • 【MATLAB】【数字信号处理】线性卷积和抽样定理
  • 什么是 MVVM ?
  • Redis(一)
  • 自动驾驶预测-决策-规划-控制学习(1):自动驾驶框架、硬件、软件概述
  • SSM建材商城网站----计算机毕业设计
  • js逆向第9例:猿人学第2题-js混淆-动态cookie1
  • [论文分享]TimesURL:通用时间序列表示学习的自监督对比学习
  • 解决sublime中文符号乱码问题