uniapp踩坑之项目:使用过滤器将时间格式化为特定格式

利用filters过滤器对数据直接进行格式化,注意:与method、onLoad、data同层级

<template>
  <div>
    <!-- orderInfo.time的数据为:2023-12-12 12:10:23 -->
    <p>{{ orderInfo.time | formatDate }}</p> <!-- 2023-12-12 -->
    <p>{{ orderInfo.time | formatTime }}</p> <!-- 12:10:23 -->
    <p>{{ orderInfo.time | formatDateTime }}</p> <!-- 2023-12-12 12:10:23 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: [],
    }
  },
  onLoad (options) {
    if (options.id) {
      let Id = options.id
      this.接口({ Id }).then(res => {
        this.orderInfo = res.data.data
      })
    }
  },
  // 过滤器
  filters: {
    formatDate (value) {
     // ios部分机型无法识别版
     // const date = new Date(value);
     // return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    
    
     // 兼容版
     if (value != undefined) {
        return value.substring(0, value.indexOf(' '))
      }
      
    },
    formatTime (value) {
     // ios部分机型无法识别版
     // const time = new Date(value);
     // return time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
      
      
     // 兼容版
     if (value != undefined) {
        const year = value.substr(0, 4); // 年
        const index = value.indexOf("-");
        const lastIndex = value.lastIndexOf("-");
        let interval = parseInt(lastIndex) - (parseInt(index) + 1); // 间隔
        const month = value.substr((parseInt(index) + 1), interval); // 月

        let space = value.indexOf(" "); // 空格
        interval = parseInt(space) - parseInt(lastIndex);
        const day = value.substr(parseInt(lastIndex) + 1, interval); // 日

        let colon = value.indexOf(":"); // 冒号
        interval = parseInt(colon) - (parseInt(space) + 1);
        const hour = value.substr(parseInt(space) + 1, interval);

        const colon2 = value.lastIndexOf(":");
        interval = parseInt(colon2) - (parseInt(colon) + 1);
        const minutes = value.substr(parseInt(colon) + 1, interval);

        const colon3 = value.lastIndexOf(":");
        const seconds = value.substr(parseInt(colon3) + 1);
        return hour + ":" + minutes + ":" + seconds; // 时分秒
      }
    },
    formatDateTime (value) {
     // ios部分机型无法识别版
     // const datetime = new Date(value);
     // const date = datetime.getFullYear()+'-'+(datetime.getMonth()+1)+'-'+datetime.getDate();
     // const time = datetime.getHours() + ":" + datetime.getMinutes() + ":" + datetime.getSeconds();
     // return date + ' ' + time;
      
     // 兼容版
     if (value != undefined) {
        const year = value.substr(0, 4); // 年
        const index = value.indexOf("-");
        const lastIndex = value.lastIndexOf("-");
        let interval = parseInt(lastIndex) - (parseInt(index) + 1); // 间隔
        const month = value.substr((parseInt(index) + 1), interval); // 月

        let space = value.indexOf(" "); // 空格
        interval = parseInt(space) - parseInt(lastIndex);
        const day = value.substr(parseInt(lastIndex) + 1, interval); // 日

        let colon = value.indexOf(":"); // 冒号
        interval = parseInt(colon) - (parseInt(space) + 1);
        const hour = value.substr(parseInt(space) + 1, interval);

        const colon2 = value.lastIndexOf(":");
        interval = parseInt(colon2) - (parseInt(colon) + 1);
        const minutes = value.substr(parseInt(colon) + 1, interval);

        const colon3 = value.lastIndexOf(":");
        const seconds = value.substr(parseInt(colon3) + 1);
        return year + "-" + month + "-" + day + hour + ":" + minutes + ":" + seconds; // 年月日时分秒
      }
    }
  }
}
</script>

上一篇文章, 

uniapp踩坑之项目:隐藏显示密码功能-CSDN博客文章浏览阅读398次。uniapp踩坑之项目:隐藏显示密码功能,1.input组件的password设置为动态前面加:冒号;2.动态切换眼睛图标使用:stylehttps://blog.csdn.net/weixin_43928112/article/details/134315684?spm=1001.2014.3001.5501

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/219147.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【算法】Boyer-Moore 算法

目录 1.概述1.1.Boyer-Moore 算法介绍1.2.坏字符规则表1.3.好后缀规则表1.4.总结 2.代码实现3.应用 更多数据结构与算法的相关知识可以查看数据结构与算法这一专栏。 有关字符串模式匹配的其它算法&#xff1a; 【算法】Brute-Force 算法 【算法】KMP 算法 【算法】Rabin-Karp …

Mac电脑vm虚拟机 VMware Fusion Pro中文 for mac

VMware Fusion Pro是一款功能强大的虚拟机软件&#xff0c;适用于需要在Mac电脑上运行其他操作系统的用户。它具有广泛的支持、快速稳定的特点以及多种高级功能&#xff0c;可以满足用户的各种需求和场景。 多操作系统支持&#xff1a;VMware Fusion Pro允许在Mac电脑上运行多…

合理的从度设置参数

环境&#xff1a;主库双1模式 一。单SQL线程 1.pos模式 1.1 position mode 模式&#xff08;最安全&#xff09; master_info_repository table relay_log_info_repository table recovery_relay_log off sync_master_info 1 sync_relay_log 1 sync_relay_log_in…

完善根文件系统

一. 简介 本文完善之前创建的根文件系统。 上一篇文章通过 设置 bootargs参数&#xff0c;使开发板通过 nfs服务从 ubuntu系统加载根文件系统。文章地址如下&#xff1a; 根文件系统初步测试-CSDN博客 二. 完善根文件系统 上一篇文章通过 设置 bootargs参数&#xff0c;使…

C++笔试题之回文数的判断

“回文”是指正读反读都能读通的句子&#xff0c;它是古今中外都有的一种修辞方式和文字游戏&#xff0c;如“我为人人&#xff0c;人人为我”等。在数学中也有这样一类数字有这样的特征&#xff0c;成为回文数&#xff08;palindrome number&#xff09;。 设n是一任意自然数…

创意设计利器:分享六款最佳的平面设计软件

1. 即时设计 即时设计是一种基于云的在线协作设计工具&#xff0c;具有原型、设计、交付、管理等全栈能力&#xff0c;对于个人及中小团队永久免费&#xff0c;至今已成为越来越多设计师的首选。 矢量编辑&#xff1a;即时设计允许用户创建、编辑和操纵矢量图形。它提供了各种…

外包干了4年,技术退步明显...

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

基因组变异注释 — ANNOVAR(一)

基因组变异注释 — ANNOVAR&#xff08;一&#xff09; 1 简介 ANNOVAR 是一款高效的基因组注释工具&#xff0c;专门用于分析和注释来自多种生物基因组&#xff08;包括人类的 hg18、hg19、hg38&#xff0c;以及小鼠、蠕虫、果蝇、酵母等&#xff09;的遗传变异。这个工具实际…

【工作生活】汽车电子嵌入式开发简介

目录 1. 目标 2. 要分享什么 3.1 行业知识 3.1.1车载行业知识&#xff1a; 3.1.2项目&#xff1a; 3.1.3开发测试工具&#xff1a; 3.2 硬件平台 3.3 基础知识 3.4 工作生活 3. 我们是谁 1. 目标 随着新能源汽车的快速崛起&#xff0c;汽车电子行业开始快速发展&…

iEnglish:家长陪伴助力养成阅读兴趣与坚持习惯

日前,一则10岁男孩子铮连续进行英语原版阅读超过940天的打卡视频在短视频平台刷屏,评论区成为家长热议互动的平台,高赞评论包括“孩子是如何做到愿意阅读的?”“口语太棒了!”“别人家的孩子就是优秀!”“求子铮妈妈分享经验”等等。 子铮妈妈对于自己孩子的优秀也是十分开心…

通达信指标公式19:龙虎榜股票池——主力控盘度的计算方法

0.小红牛本指标&#xff0c;选股的思路说明&#xff1a;控盘度&#xff0c;又称主力控盘&#xff0c;是指主力控制了某只股票的大部分流通股&#xff0c;从而控制了股票的价格。主力控盘的目的通常是为了获取更多的收益&#xff0c;通过控制股票价格来实现其策略。所以首要分析…

数据结构——链表题目

文章目录 JZ25 合并两个排序的链表&#xff08;简单&#xff09;NC22 合并两个有序的数组&#xff08;简单&#xff09;NC3 链表中环的入口节点&#xff08;中等&#xff09;NC50 链表中的节点每k个一组翻转&#xff08;中等&#xff09;NC53 删除链表的倒数第n个节点(中等) JZ…

软件崩溃时VS中看不到有效的调用堆栈,使用Windbg动态调试去分析定位

目录 1、问题说明 2、使用Windbg查看崩溃时详细的函数调用堆栈 3、将Windbg中显示的函数调用堆栈对照着C源码进一步分析 4、最后 VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&#xff09;https://blog.csdn.net/chenlycly/art…

[Java学习日记]多线程练习、线程池

目录 一.案例&#xff1a;五个人抢红包 二.案例&#xff1a;两个抽奖池抽奖 三.案例&#xff1a;两个抽奖池抽奖&#xff1a;获取线程运行的结果 四.线程池&#xff1a;用来存放线程&#xff0c;避免多次重复创建线程 五.自定义线程池 六.最大并行数与线程池大小 一.案例&…

【Android】Glide的简单使用(上)

文章目录 引入Glide的优点:缺点: 使用常用方法:从网络加载图片从文件加载图片加载resource资源加载URI地址设置占位图出错时的图片占位图图片过渡的Transitions自定义过渡动画图片大小调整缩放图片播放gifasGif()把Gif当作Bitmap播放显示本地视频缩略图 引入 Glide是Google员工…

IntelliJ IDEA 2023.2新特性详解第三弹!Docker、Kubernetes等支持!

9 Docker 在 Docker 镜像层内预览文件 现在可以在 Services&#xff08;服务&#xff09;工具窗口中轻松访问和预览 Docker 镜像层的内容。 从列表选择镜像&#xff0c;选择 Show layers&#xff08;显示层&#xff09;&#xff0c;然后点击 Analyze image for more informati…

平价开放式耳机怎么选?盘点几款好用的平价开放式耳机!

在这个充满音频奇迹的年代&#xff0c;选一副好耳机就像是挑选人生伴侣一样重要&#xff0c;而开放式耳机&#xff0c;由于佩戴无需入耳带来了不错的舒适度&#xff0c;就此受到了许多人的喜爱。 可问题是&#xff0c;市面上平价开放式耳机太多&#xff0c;让人眼花缭乱&#…

医院运维 告警闪现后的故障排查

长期以来&#xff0c;医院信息化运维中存在着科室复杂、应用场景多、终端运维工作量大、软件系统兼容需求强等诸多痛点&#xff0c;且对技术设备的稳定性、连续性要求极高&#xff0c;在日常运维中&#xff0c;需要应对和解决这些问题来保障业务稳定、健康运行。 1、数据孤岛 …

【离散数学】——期末刷题题库(二元关系作业一(运算性质闭包))

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

揭秘MQTT:为何它是物联网的首选协议?

文章目录 MQTT 协议简介概览MQTT 与其他协议对比MQTT vs HTTPMQTT vs XMPP 为什么 MQTT 是适用于物联网的最佳协议&#xff1f;轻量高效&#xff0c;节省带宽可靠的消息传递海量连接支持安全的双向通信在线状态感知 MQTT 5.0 与 3.1.1MQTT 服务器MQTT 客户端 MQTT 协议简介 概…