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

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.idthis.接口({ 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

相关文章:

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

利用filters过滤器对数据直接进行格式化&#xff0c;注意&#xff1a;与method、onLoad、data同层级 <template><div><!-- orderInfo.time的数据为&#xff1a;2023-12-12 12:10:23 --><p>{{ orderInfo.time | formatDate }}</p> <!-- 2023-1…...

webpack学习-2.管理资源

webpack学习-2.管理资源 1.这章要干嘛2.加载css注意顺序&#xff01; 3.总结 1.这章要干嘛 管理资源&#xff0c;什么意思呢&#xff1f;管理什么资源&#xff1f;项目中经常会 导入各种各样的css文件&#xff0c;图片文件&#xff0c;字体文件&#xff0c;数据文件等等&#…...

658. 找到 K 个最接近的元素

658. 找到 K 个最接近的元素 Java代码&#xff1a;滑窗 class Solution {public List<Integer> findClosestElements(int[] arr, int k, int x) {List<Integer> list new ArrayList<>();for (int i 0; i < arr.length; i) {arr[i] arr[i] - x;}for(i…...

十二、MapReduce概述

1、MapReduce &#xff08;1&#xff09;采用框架 MapReduce是“分散——>汇总”模式的分布式计算框架&#xff0c;可供开发人员进行相应计算 &#xff08;2&#xff09;编程接口&#xff1a; ~Map ~Reduce 其中&#xff0c;Map功能接口提供了“分散”的功能&#xff…...

shell条件测试

目录 1.1.用途 1.2.基本语法 1.2.1.格式: 1.2.2.例 1.3 文件测试 1.4.整数测试 1.4.1.作用 1.4.2.操作符 1.4.3.示例&#xff1a; 1.5.逻辑操作符 1.5.1.符号 1.5.2.例&#xff1a; 1.6.命令分隔符 1.1.用途 为了能够正确处理Shell程序运行过程中遇到的各种情况&am…...

python在线读取传奇列表,并解析为需要的JSON格式

python在线读取传奇列表,并解析为需要的JSON格式,以下为传奇中使用的TXT列表格式, [Server] ; 使用“/”字符分开颜色,也可以不使用颜色,支持以前的旧格式,只有标题和服务器标题支持颜色 ; 标题/颜色代码(0-255)|服务器标题/颜色代码(0-255)|服务器名称|服务器IP|服务器端…...

【docker 】 安装docker(centOS7)

官网 docker官网 github源码 官网 在CentOS上安装Docker引擎 官网 在Debian上安装Docker引擎 官网 在 Fedora上安装Docker引擎 官网 在ubuntu上安装Docker引擎 官网 在RHEL (s390x)上安装Docker引擎 官网 在SLES上安装Docker引擎 最完善的资料都在官网。 卸载旧版本 …...

智能网联汽车场景数据图像标注要求及方法

智能网联汽车场景数据图像标注要求及方法 1 范围 本标准规定了智能网联汽车场景数据图像中交通参与者、交通信号灯、交通标志、交通标线、可行驶区域、光照条件、遮挡截断情况7类元素的标注要求及方法。 本标准适用于智能网联汽车图像数据标注。 2 规范性引…...

四. 基于环视Camera的BEV感知算法-BEVFormer

目标 前言0. 简述1. 算法动机&开创性思路2. 主体结构3. 损失函数4. 性能对比5. BEVFormerv2总结下载链接参考 前言 自动驾驶之心推出的《国内首个BVE感知全栈系列学习教程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习下课程第四章—…...

gin投票系统3

对应视频v1版本 1.优化登陆接口 将同步改为异步 原login前端代码&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>香香编程-投票项目</title> </head> <body> <m…...

windows如何解决端口冲突(实用篇)

在项目设计中&#xff0c;环境配置成功点击运行瞬间&#xff0c;一大堆红爆出&#xff0c;8080端口占用&#xff0c;这个是很烦人的。。。 解决方式&#xff1a; 笨方法&#xff1a;一、查看所有端口实用情况&#xff08;挨个扫&#xff09; 按住【WINR】快捷键打开运行输入…...

「PPT 下载」Google DevFest Keynote | 复杂的海外网络环境下,如何提升连接质量

&#xff08;全网都在找的《社交泛娱乐出海作战地图》&#xff0c;点击获取&#x1f446;&#xff09; 12 月 10 日&#xff0c;“Google DevFest 2023 上海站”大会如期在上海市东方万国宴会中心举办。延续过往的技术交流碰撞、前沿技术学习基调传统&#xff0c;本届大会聚焦行…...

Logstash输入Kafka输出Es配置

Logstash介绍 Logstash是一个开源的数据收集引擎&#xff0c;具有实时管道功能。它可以从各种数据源中动态地统一和标准化数据&#xff0c;并将其发送到你选择的目的地。Logstash的早期目标主要是用于收集日志&#xff0c;但现在的功能已经远远超出这个范围。任何事件类型都可…...

Bash脚本处理ogg、flac格式到mp3格式的批量转换

现在下载的许多音乐文件是flac和ogg格式的&#xff0c;QQ音乐上下载的就是这样的&#xff0c;这些文件尺寸比较大&#xff0c;在某些场合使用不便&#xff0c;比如在车机上播放还是mp3格式合适&#xff0c;音质这些在车机上播放足够了&#xff0c;要求不高。比如本人就喜欢下载…...

Android 依据Build相关信息判断机型

Android 依据Build相关信息判断机型 本文主要通过Build的相关信息获取机型,目前机型判断的较少,后续继续维护更新 public static String parseBuild() {StringBuilder sb new StringBuilder();String deriveFingerprint Build.FINGERPRINT;String manufacturer Build.MANU…...

2024年甘肃省职业院校技能大赛信息安全管理与评估赛项一阶段样题一

2024年甘肃省职业院校技能大赛高职学生组电子与信息大类信息安全管理与评估赛项样题一 竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防…...

ARM:作业3

按键中断代码编写 代码: key_it.h #ifndef __KEY_IT_H__ #define __KEY_IT_H__#include "stm32mp1xx_gpio.h" #include "stm32mp1xx_exti.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_gic.h"void key1_it_config(); voi…...

基于OpenCV+CNN+IOT+微信小程序智能果实采摘指导系统——深度学习算法应用(含python、JS工程源码)+数据集+模型(二)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境Jupyter Notebook环境Pycharm 环境微信开发者工具OneNET云平台 相关其它博客工程源代码下载其它资料下载 前言 本项目基于Keras框架&#xff0c;引入CNN进行模型训练&#xff0c;采用Dropout梯度…...

*上位机的定义

上位机是指在分布式控制系统中&#xff0c;负责监控和控制下位机&#xff08;也称为远程终端设备&#xff09;的计算机或者计算机网络。它通常是一个高性能的计算设备&#xff0c;运行着特定的监控软件&#xff0c;用于实时监测、控制和管理下位机设备。 上位机负责与各个下位…...

架构LAMP

目录 1.什么是LAMP 2.LAMP组成及作用 3.搭建Apache httpd服务 4.编译安装mysqld 服务 5.编译安装PHP 解析环境 6.安装论坛 1.什么是LAMP LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...