广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中如何将日期转换为指定的格式
  • 967
分享到

vue中如何将日期转换为指定的格式

2024-04-02 19:04:59 967人浏览 安东尼
摘要

目录Vue将日期转换为指定的格式方案一方案二vue时间格式总结及转换获取当前时间时间格式之间的转换vue将日期转换为指定的格式 方案一 这个方法是我觉得特别好用的: 写一个转换日期的

vue将日期转换为指定的格式

方案一

这个方法是我觉得特别好用的:

写一个转换日期的方法,直接使用就可以

//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFORMat:function(time) {
    var date=new Date(time);
    var year=date.getFullYear();
    
    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
    // 拼接
    return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}

使用的时候,直接调用:

{{dateFormat(create_time)}}
this.dateFormat(new Date())

结果:

在这里插入图片描述

方案二

vue中使用moment格式转换日期:

1)先安装moment包:npm install moment

2)在组件中引入moment: import moment from "moment"

3)在组件中使用:let str = moment(new Date()).format("YYYY-MM-DD hh:mm:ss") //  2018-04-24 09:55:40

但是这个会有一点问题就是:

下午的时间,还是1、2、3这种的

例如:

下午时间

2019-1-1 01:10:10

大家根据需求选择合适的。

vue时间格式总结及转换

vue框架中我们常常用el-date-picker标签来显示和选择时间,那么,常见的时间的格式包含年-月-日(yyyy-MM-dd)、年-月-日 时-分-秒(yyyy-MM-dd HH-mm-ss)、标准时间格式以及时间戳。

我们就来总结一下常用的获取方法和它们之间的转换方法。

获取当前时间

先看效果:

        

Ⅰ. 格式:年-月-日 时-分-秒(yyyy-MM-dd HH-mm-ss)

<template>
    <div>
		<h1>vue 时间格式常见应用</h1>
		<h3>获取当前时间(格式:年月日时分秒):{{time}}</h3>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				time:''
			}
		},
		created() {
			this.getNowTime();
		},
		methods: {
			getNowTime(){
				const yy = new Date().getFullYear()
				const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new             
                    Date().getMonth() + 1) : (new Date().getMonth() + 1)
				const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new 
                    Date().getDate()
				const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new 
                    Date().getHours()
				const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : 
                     new Date().getMinutes()
				const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : 
                     new Date().getSeconds()
				this.time = yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss;
			}
		}
	}
</script>

Ⅱ.格式:标准时间

<template>
    <div>
		<h1>vue 时间格式常见应用</h1>
		<h3>获取当前标准时间(格式:年月日时分秒):{{standard_time}}</h3>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				standard_time:''
			}
		},
		created() {
			this.getGMTtime();
		},
		methods: {
			getGMTtime(){
				this.standard_time =new Date();
			}
		}
	}
</script>

Ⅲ.格式:时间戳

<template>
    <div>
		<h1>vue 时间格式常见应用</h1>
		<h3>获取当前时间的时间戳:{{current_timestamp}}</h3>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				current_timestamp:''
			}
		},
		created() {
			this.getnowtimestamp();
		},
		methods: {
			getnowtimestamp(){
				var date = new Date();
				this.current_timestamp = Date.parse(date)
			}
		}
	}
</script>

时间格式之间的转换

效果:

        

Ⅰ.年-月-日 时-分-秒格式转换成标准时间

<template>
   <h1>时间格式之间的转换</h1>
	<h3>1.年月日时分秒格式转换成标准时间</h3>
	<div style="display: flex;">
		<h5>假如将"2022-08-17 09:54:48"转换成标准时间格式,则标准格式为:</h5>
		<h4>{{conversion_time}}</h4>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				conversion_time: new Date('2022-08-17 09:54:48')
			}
		}
	}
</script>

Ⅱ.标准时间转换成年-月-日 时-分-秒格式

<template>
    <h1>时间格式之间的转换</h1>
    <h3>2.标准时间转换成年月日时分秒格式</h3>
    <div style="display: flex;">
		<h5>假如将"Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)"转换成年月日时分秒格式,则        
        写为:</h5>
		<h4>{{conversion_time1}}</h4>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				conversion_time1:'',
			}
		},
        created() {
			this.gettime();
		},
        methods: {
			gettime(){
				var date = new Date('Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)');
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var min = date.getMinutes();
				min = min < 10 ? ('0' + min) : min;
				var s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				this.conversion_time1 = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':'             
                + s;
			}
        }
	}
</script>

Ⅲ.年-月-日 时-分-秒格式转换成时间戳

<template>
    <h3>3.年月日时分秒格式转换成时间戳</h3>
    <div style="display: flex;">
        <h5>假如将"2022-08-17 09:54:48"转换成时间戳,则写为:</h5>
		<h4>{{conversion_time2}}</h4>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				conversion_time2:Date.parse('2022-08-17 09:54:48')
			}
		}
	}
</script>

这时你是不是有点困惑怎么来判断转换的时间戳是否正确呢,我们可以通过在线的转换工具来转换检测,转换工具网址:时间戳(Unix timestamp)转换工具 - 在线工具

 那下面我们来检测一下:

所以转换的是没有问题的!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中如何将日期转换为指定的格式

本文链接: https://www.lsjlt.com/news/168888.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中如何将日期转换为指定的格式
    目录vue将日期转换为指定的格式方案一方案二vue时间格式总结及转换获取当前时间时间格式之间的转换vue将日期转换为指定的格式 方案一 这个方法是我觉得特别好用的: 写一个转换日期的...
    99+
    2022-11-13
  • Python转换时间戳为指定格式日期
    目录当前时间实例1:实例2:指定时间戳实例1:实例2:总结 我们将会启用到time库: 当前时间 实例1: import time # 获得当前时间时间戳 now = int(t...
    99+
    2022-11-12
  • php如何将指定日期转化为星期
    本文小编为大家详细介绍“php如何将指定日期转化为星期”,内容详细,步骤清晰,细节处理妥当,希望这篇“php如何将指定日期转化为星期”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。转换方法:1、用strtotime...
    99+
    2023-06-30
  • php如何将string转为日期格式
    这篇文章主要介绍“php如何将string转为日期格式”,在日常操作中,相信很多人在php如何将string转为日期格式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何将string转为日期格式”的疑...
    99+
    2023-06-30
  • PHP中怎么将时间戳转换为日期格式
    本篇内容主要讲解“PHP中怎么将时间戳转换为日期格式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“PHP中怎么将时间戳转换为日期格式”吧!一、什么是时间戳时间戳是指从1970年1月1日00:00...
    99+
    2023-07-05
  • php如何将数值转为日期格式
    这篇文章主要介绍了php如何将数值转为日期格式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇php如何将数值转为日期格式文章都会有所收获,下面我们一起来看看吧。php将数值转为日期格式的方法:1、创建一个php...
    99+
    2023-07-05
  • Python3时间戳转换为指定格式的日
    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换。所谓时间戳,就是从 1970年1月1日 00:00:00 到现在的秒数。原来我也写过关于python3里面如何进行时间转...
    99+
    2023-01-31
    转换为 格式 时间
  • Python3时间转换之时间戳转换为指定格式的日期方法详解
    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换。所谓时间戳,就是从 1970年1月1日 00:00:00 到现在...
    99+
    2022-11-12
  • 怎么用PHP将年月日转换为不同的日期格式
    这篇文章主要介绍了怎么用PHP将年月日转换为不同的日期格式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用PHP将年月日转换为不同的日期格式文章都会有所收获,下面我们一起来看看吧。日期和时间的概念在介绍如何...
    99+
    2023-07-05
  • mysql时间戳如何转换为日期格式
    这篇文章主要为大家展示了“mysql时间戳如何转换为日期格式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“mysql时间戳如何转换为日期格式”这篇文章吧。 ...
    99+
    2022-10-19
  • 如何使用PHP date()函数将时间戳转换为日期格式
    这篇“如何使用PHP date()函数将时间戳转换为日期格式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何使用PHP d...
    99+
    2023-07-05
  • Java中如何将日期数据类型的格式进行转换
    这篇文章给大家介绍Java中如何将日期数据类型的格式进行转换,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Date类:Date类型转String类型(以时间格式1970-01-01 01:01:01为例)//yyyy-...
    99+
    2023-05-31
    java ava 数据类
  • 如何用php将日期格式转为Unix时间戳
    这篇文章主要介绍“如何用php将日期格式转为Unix时间戳”,在日常操作中,相信很多人在如何用php将日期格式转为Unix时间戳问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用php将日期格式转为Unix...
    99+
    2023-07-05
  • vue使用moment如何将时间戳转为标准日期时间格式
    目录使用moment将时间戳转为标准日期时间格式将时间戳转换为日期格式:moment、new Date()1.new Date()方式2. moment函数方式3.配合过滤器flit...
    99+
    2023-05-20
    vue使用moment moment时间戳 vue标准日期时间格式
  • 如何转换layUI的数据表格中的日期格式
    这篇文章主要介绍如何转换layUI的数据表格中的日期格式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!转换layUI的数据表格中的日期格式前端jsp代码 <table...
    99+
    2022-10-19
  • oracle 数据库 中 如何将不带汉字的日期格式转换成带“年月日时分秒”格式的日期
    通常我们在oracle中写日期格式化是这样的 to_date(时间,"yyyy-mm-dd") 但是,有时候也会遇到一些别样的需求,比如这样 : 让你按"xxxx年xx月xx日 xx时xx分xx秒"的格式来显示时间 对于初次接触...
    99+
    2020-05-13
    oracle 数据库 如何将不带汉字的日期格式转换成带“年月日时分秒”格式的日期
  • 探讨PHP如何将Unix时间戳转换成日期格式
    在PHP编程中的日期处理是相当常见的。而Unix时间戳则是日期处理时经常会遇到的一个迷惑性问题。Unix时间戳就是从1970年1月1日零点开始到现在所经过的秒数。在PHP中,我们很方便就可以把时间戳转化成可视化的日期格式。在本文中,我们将会...
    99+
    2023-05-14
    php php时间戳
  • 如何用PHP将Unix时间戳转为日期时间格式
    Unix时间戳是指从1970年1月1日0时0分0秒起至当前时间的总秒数,它是Linux、Unix系统所采用的一种时间表示标准,也被广泛应用于Web开发中。在PHP中,我们可以把Unix时间戳转换为日期时间格式,以便更好地呈现时间信息。本文将...
    99+
    2023-05-14
    php php时间戳
  • php如何用strtotime函数将日期格式转为时间戳
    本篇内容介绍了“php如何用strtotime函数将日期格式转为时间戳”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!日期格式转时间戳是在PH...
    99+
    2023-07-05
  • PHP和MySQL中如何将日期转换为时间戳
    这篇文章主要讲解了“PHP和MySQL中如何将日期转换为时间戳”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP和MySQL中如何将日期转换为时间戳”吧!PHP 中日期戳转时间戳在 PHP...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作