当前位置: 首页 > 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站点服务…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...