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

news2024/11/25 1:08:06

利用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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

D7292 双向直流电机驱动电路 ( 速度可控 ) 7V~20V 400mA,峰值电流可达1.2A 采用DIP8、SOP8的封装形式

D7292是一块带有制动和速度控制功能的双向直流电机单片电路。它可以用来驱动CDP、VCR 和 TOY等负载。该电路通过两个逻辑输入管脚的电压&#xff0c;可以控制电机正反 个方向转动以及制动。并且可以通过改变速度控制管脚的电压&#xff0c;从而方便的改变电机的速度。D7292采用…

搞笑视频无水印下载,高清无水印视频网站!

搞笑视频无水印下载这件事情一直困扰了广大网友&#xff0c;每当看见好玩好笑的搞笑视频然而下载下来的时候&#xff0c;要么画质模糊就带有水印今天分享大家几个搞笑视频无水印下载方法。 这是一个非常良心的搞笑视频无水印下载小程序水印云&#xff0c;它支持图片去水印、视…

【matlab程序】matlab画太极图|阴阳

【matlab程序】matlab画太极图|阴阳 %% 海洋与大气科学; % 时间:20231205; % clear;clc;close all; t=0:1/100000:2pi+0.00001; t1=-pi/2:1/100000:pi/2+0.00001; t2=pi/2:1/100000:3pi/2+0.00001; R=10; r=1; figure plot(Rcos(t),Rsin(t),‘color’,‘k’,‘lin…

Python下TCP编程

​ 在Python中使用socket模块的socket函数可以完成&#xff0c;语法格式如下&#xff1a; ssocket.socket(AddressFamily, Type)函数socket.socket创建一个socket&#xff0c;返回该socket的描述符。该函数带有两个参数。 Address Family&#xff1a;可以选择AF_INET&#xf…

软件测试方法之等价类测试

01 等价类划分法 1、应用场合 有数据输入的地方&#xff0c;可以使用等价类划分法。 从大量数据中挑选少量代表数据进行测试。 2、测试思想 穷举测试&#xff1a;把所有可能的数据全部测试一遍叫穷举测试。穷举测试是最全面的测试&#xff0c;但是在实际工作中不能采用&am…

Netty核心知识总结

Netty是一个高性能、异步事件驱动的NIO框架&#xff0c;它提供了对TCP、UDP和文件传输的支持&#xff0c;作为一个异步NIO框架&#xff0c;Netty的所有IO操作都是异步非阻塞的&#xff0c;通过Future-Listener机制&#xff0c;用户可以方便的主动获取或者通过通知机制获得IO操作…

群体遗传 — 核苷酸多样性π

群体遗传 — 核苷酸多样性π **核苷酸多样性&#xff08;nucleotide diversity&#xff09;&#xff0c;记为π&#xff0c;是分子遗传学中一个重要的概念&#xff0c;用于量化种群内部或不同种群间的遗传多样性。**这一概念由根井正利和李文雄在 1979 年提出。核苷酸多样性的…

zabbix的自动发现机制、代理功能、SNMP监控

一、自动发现&#xff08;不安全&#xff0c;有时会失效&#xff0c;建议手动添加主机&#xff09; 1、定义 zabbix主动与服务端联系&#xff0c;将自己的地址和端口发送给服务端&#xff0c;实现自动添加监控主机 客户端是主动的一方 2、缺点 若自定义网段中主机数量太多…

Python 全栈体系【四阶】(二)

第二章 pandas 一、pandas 介绍 Python Data Analysis Library pandas 是基于 NumPy 的一种工具&#xff0c;该工具是为了解决数据分析任务而创建的。Pandas 纳入了大量库和一些标准的数据模型&#xff0c;提供了高效地操作大型结构化数据集所需的工具。 二、pandas 核心数…

C语言进阶之路-数组与指针

目录 一、学习目标 二、数组入门 基本概念 语法释义&#xff1a; 定义&#xff1a; 访问&#xff1a; 赋值&#xff1a; 字符数组 多维数组 数组万能拆解法 三、指针入门 内存地址 基地址 取址符 指针基础 指针的定义&#xff1a; 指针的赋值 指针的尺寸 四、…

快手数仓面试题附答案

题目 1 讲一下你门公司的大数据项目架构&#xff1f;2 你在工作中都负责哪一部分3 spark提交一个程序的整体执行流程4 spark常用算子列几个&#xff0c;6到8个吧5 transformation跟action算子的区别6 map和flatmap算子的区别7 自定义udf&#xff0c;udtf&#xff0c;udaf讲一下…

java:slf4j、log4j、log4j2、logback日志框架的区别与示例

文章目录 背景SLF4J - 简单日志门面:Log4j - 强大而古老的日志框架:Log4j2 - Log4j的升级版:Logback - Log4j的继任者:比较Springboot集成slf4j、log4j2参考 背景 在Java开发中&#xff0c;日志记录是一个不可或缺的组成部分。为了满足不同的需求&#xff0c;Java社区涌现出多…

the name of a constructor must match the name of the enclosing class

构造器名匹配封闭类名 命令码的位置关系不对 解决&#xff1a;调整 命令码所在层级

探索人工智能领域——每日20个名词详解【day9】

目录 前言 正文 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4da;。 &#x1f4e3;如需转载&#xff0c;请事先与我联系以…

基于高德API实现网络geoJSON功能(整体)

代码实现&#xff1a; <script>// 3、初始化一个高德图层const gaode new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: http://wprd0{1-4}.is.autonavi.com/appmaptile?langzh_cn&size1&style7&x{x}&y{y}&z{z},w…

Axure网页端高复用组件库, 下拉菜单文件上传穿梭框日期城市选择器

作品说明 组件数量&#xff1a;共 11 套 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;web端原型设计、桌面端原型设计 作品特色 本作品为「web端组件库」&#xff0c;高保真高交互 (带仿真功能效果)&#xff1b;运用了动态面板、中继…

Hadoop学习笔记(HDP)-Part.09 安装OpenLDAP

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

CUDA简介——Grid和Block内Thread索引

1. 引言 前序博客&#xff1a; CUDA简介——基本概念CUDA简介——编程模式CUDA简介——For循环并行化 Thread Index&#xff1a; 每个Thread都有其thread index。 在Kernel中&#xff0c;可通过内置的threadIdx变量来获取其thread index。threadIdx为三维的&#xff0c;有相…

nodejs+vue+微信小程序+python+PHP在线购票系统的设计与实现-计算机毕业设计推荐

伴随着信息时代的到来&#xff0c;以及不断发展起来的微电子技术&#xff0c;这些都为在线购票带来了很好的发展条件。同时&#xff0c;在线购票的范围不断增大&#xff0c;这就需要有一种既能使用又能使用的、便于使用的、便于使用的系统来对其进行管理。在目前这种大环境下&a…

电子学会C/C++编程等级考试2023年03月(四级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:最佳路径 如下所示的由正整数数字构成的三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 从三角形的顶部到底部有很多条不同的路径。对于每条路径,把路径上面的数加起来可以得到一个和,和最大的路径称为最佳路径。你的任务就是求出最…