Vue操作时间

一、获取现在时间

const currentTime = () => {let date = new Date();let year = date.getFullYear(); //月份从0~11,所以加一let month = date.getMonth();let dateArr = [date.getMonth() + 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),];//如果格式是MM则需要此步骤,如果是M格式则此循环注释掉for (var i = 0; i < dateArr.length; i++) {if (dateArr[i] >= 1 && dateArr[i] <= 9) {dateArr[i] = "0" + dateArr[i];}}let strDate = year + "-" + dateArr[0] + "-" + dateArr[1]+" " +dateArr[2] +":" +dateArr[3] +":" +dateArr[4];//此处可以拿外部的变量接收  strDate:YYYY-MM-DD HH:mm:ssconsole.log("strDate", strDate);
};

二、提取日期部分

如果你想要从一个具有日期和时间的字符串中提取日期部分,只保留日期部分(年、月、日),你可以使用JavaScript中的Date对象来实现。以下是一个示例:

const dateTimeString = '2024-02-07 00:00:00';
const datePart = new Date(dateTimeString).toISOString().split('T')[0];console.log(datePart); // 输出: '2024-02-07'

在这个示例中,我们首先使用new Date(dateTimeString)将字符串转换为Date对象。然后,我们使用.toISOString()方法将Date对象转换为ISO格式的字符串(例如:'2024-02-07T00:00:00.000Z')。最后,我们使用.split('T')[0]将ISO字符串按照 'T' 字符进行分割,只保留日期部分。

三、时间戳转换

组件中定义一个过滤器,以便在模板中使用它来将时间戳转换为特定的时间格式

<template><div><p>原始时间戳:{{ timestamp }}</p><p>转换后时间:{{ timestamp | formatDate }}</p></div>
</template><script>
export default {data() {return {timestamp: 1629792000000 // 这里是你的时间戳};},filters: {formatDate(timestamp) {const date = new Date(timestamp);return date.toLocaleString(); // 这里可以根据需要使用不同的日期格式化选项}}
};
</script>
  1. 完整日期:

    new Date(timestamp).toLocaleString()
  2. 仅日期

    new Date(timestamp).toLocaleDateString()
    
  3. 仅时间

    new Date(timestamp).toLocaleTimeString()
  4. 自定义格式:

    如果你需要更复杂的日期格式化,你可以考虑使用像 moment.js 或 date-fns 这样的第三方日期库。这些库提供了更多灵活的选项和格式化功能

    以下是使用 moment.js 的示例:

    首先,安装 moment.js 库:
    cnpm install moment
    然后在你的 Vue 组件中使用它:
    <template><div><p>原始时间戳:{{ timestamp }}</p><p>转换后时间:{{ formattedDate }}</p></div>
    </template><script>
    import moment from 'moment';export default {data() {return {timestamp: 1629792000000 // 这里是你的时间戳};},computed: {formattedDate() {return moment(this.timestamp).format('YYYY-MM-DD HH:mm:ss'); // 自定义格式}}
    };
    </script>
    
    使用的页面多可以选择封装  参考:vue中 v-for如何将时间戳转换为时间_vue 字符串转时间戳_懒员员的博客-CSDN博客

 

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

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

相关文章

Pytorch-day04-模型构建-checkpoint

PyTorch 模型构建 1、GPU配置2、数据预处理3、划分训练集、验证集、测试集4、选择模型5、设定损失函数&优化方法6、模型效果评估 #导入常用包 import os import numpy as np import torch from torch.utils.data import Dataset, DataLoader from torchvision.transfor…

安卓主板定制_电磁屏/电容屏安卓平板基于MTK联发科方案定制

定制化行业平板 在各行各业中的地位越来越重要&#xff0c;甚至在行业转型和发展中发挥着不可替代的作用。随着工业化社会的快速发展&#xff0c;工业生产对智控设备要求越来越高&#xff0c;运用的范畴也越来越普遍广泛&#xff0c;工业级平板就是其中一种应用广泛的设备。 新…

流程挖掘在医疗领域中的应用价值

医院作为一个庞大的医疗机构&#xff0c;承担着诊断、治疗和护理等重要任务。每天&#xff0c;数以千计甚至数以万计的患者涌入医院&#xff0c;带来了大量的医疗需求和数据。同时&#xff0c;医学技术的进步和信息化的发展使得医院面临着日益增长的信息量&#xff0c;导致信息…

字节一面:post为什么会发送两次请求?

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;因为在前端开发的日常开发中我们总是会与post请求打交道&#xff0c;一个小小的post请求也是牵扯到很多知识点的&#xff0c;博主在这给大家细细道来。 &#x1f680; 作者…

python爬虫实战(3)--爬取某乎热搜

1. 分析爬取地址 打开某乎首页&#xff0c;点击热榜 这个就是我们需要爬取的地址&#xff0c;取到地址某乎/api/v3/feed/topstory/hot-lists/total?limit50&desktoptrue 定义好请求头&#xff0c;从Accept往下的请求头全部复制&#xff0c;转换成json headers {Accep…

Levels - 场景参考:山脉景观(Landscape Mountains)

一些从前的笔记的归档&#xff0c;记录了一些UE4资产的相关信息&#xff1b; 山脉景观&#xff08;Landscape Mountains&#xff09;&#xff1a; 项目的地形材质比较复杂&#xff0c;有几个比较重要的大效果功能&#xff0c;一个是沉积岩的效果&#xff1a; 沉积岩效果的功能…

保研面试题复习

信源/信道编码的目的和种类&#xff1f; 这个图是每个人在学习通信原理的时候&#xff0c;都会遇到的图。包含了三要素&#xff1a;信源、信道和信宿。这个图直接可以回答最开始的问题&#xff0c;所谓信源编码就是针对信源编码&#xff0c;所谓信道编码就是针对信道编码。 有…

python 使用 pdf2image 库将PDF转换为图片

python 使用 pdf2image 库将PDF转换为图片 初环境步骤一&#xff1a;安装pdf2image库步骤二&#xff1a;导入必要的库步骤三&#xff1a;指定PDF文件路径步骤四&#xff1a;将PDF转换为图片步骤五&#xff1a;保存图像为图片文件完整代码运行结果 在数字化时代&#xff0c;PDF&…

如何在 Ubuntu 中安装最新的 Python 版本

动动发财的小手&#xff0c;点个赞吧&#xff01; Python 是增长最快的主要通用编程语言。其原因有很多&#xff0c;例如其可读性和灵活性、易于学习和使用、可靠性和效率。 目前使用的 Python 有两个主要版本 – 2 和 3&#xff08;Python 的现在和未来&#xff09;&#xff1…

Unity——动效与缓动动画

游戏体验是综合性的&#xff0c;音效、剧情、界面设计、美术风格和玩法内涵都是游戏体验的组成部分。而且一些细节上的美化&#xff0c;会出乎意料地带给用户愉悦感和满足感。这些细节包括跳跃的图标、闪烁的文字、流畅滑动的通讯录等&#xff0c;可以统称为动态效果或动效。 …

通过运行中的容器生成 Docker Compose 配置文件

背景 笔者之前有一次不小心删除了原始的 docker-compose.yml 文件&#xff0c;不过正在运行的 Docker 容器还在&#xff0c;找了许久&#xff0c;发现一个方法可以从这些容器中生成一个等效的 Docker Compose 配置文件。本文将介绍使用 autocompose 工具从正在运行的容器中反向…

http协议和HTTP编程流程

目录 1、http协议 &#xff08;1&#xff09;概念 &#xff08;2&#xff09;使用的端口 &#xff08;3&#xff09;长连接和短连接 &#xff08;4&#xff09;常见web服务器 2、https&#xff08;443&#xff09; 3、浏览器连接服务器编程 1、http协议 &#xff08;超文…

mysql insert出现主键冲突错误的解决方法

mysql insert出现主键冲突错误的解决方法 insert 时防止出现主键冲突错误的方法 在mysql中插入数据的时候常常因为主键存在而冲突报错&#xff0c;下面有两个解决方法&#xff1a; 1 在insert 语句中添加ignore 关键字 insert ignore into table (id,name) values (1,username)…

Linux下的系统编程——makefile入门(四)

前言&#xff1a; 或许很多Winodws的程序员都不知道这个东西&#xff0c;因为那些Windows的IDE都为你做了这个工作&#xff0c;但我觉得要作一个好的和professional的程序员&#xff0c;makefile还是要懂。这就好像现在有这么多的HTML的编辑器&#xff0c;但如果你想成为一个专…

【git】工作场景中常用的git命令

工作场景中常用的git命令 1. 必备改名改邮箱拉代码下来并且创建新分支git commit回滚某个文件删除分支 工作场景中常用的git命令&#xff0c;记录下来方便调取 1. 必备 改名改邮箱 一般与他人合作&#xff0c;至少你提交的名字得被人熟知或者遵循规范&#xff0c;因此需要更改…

【业务功能篇74】三高微服务项目springboot-springcloud

三高指的是&#xff1a;高性能、高并发、高可用 2.项目架构 2.1 系统架构图 整体的项目架构图如下 2.2 业务组成 整体的项目业务组成如下

ubuntu can应用开发环境搭建指南

sudo apt-get update sudo apt-get install can-utils libsocketcan-dev can数据发送这个采用来自网上的一段代码进行测试: can_send.c代码内容如下: /* 1. 报文发送程序 */ #include <stdio.h> #include <stdlib.h> #include <string.h> #include <…

SpringCloud

SpringCloud组件 服务注册中心/服务治理 Eureka&#xff1a;Java 写的&#xff0c;官网停止更新&#xff0c;AP&#xff0c;可视化页面&#xff0c;可以设置自我保护机制开关Zookeeper&#xff1a;CP&#xff0c;Java 写的&#xff0c;临时节点&#xff0c;没有可视化页面Cons…

GO学习之 数据库(Redis)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

Python 密码破解指南:10~14

协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【OpenDocCN 饱和式翻译计划】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 收割 SB 的人会被 SB 们封神&#xff0c;试图唤醒 SB 的人是 SB 眼中的 SB。——SB 第三定律 十、加…