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

 更新时间:2022年10月08日 09:42:10   作者:sunrj_go  
这篇文章主要介绍了vue中如何将日期转换为指定的格式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

方案一

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

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

//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat:function(time) {
    var date=new Date(time);
    var year=date.getFullYear();
    /* 在日期格式中,月份是从0开始的,因此要加0
     * 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
     * */
    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)转换工具 - 在线工具

 那下面我们来检测一下:

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现聊天框发送表情

    vue实现聊天框发送表情

    这篇文章主要为大家详细介绍了vue实现聊天框发送表情,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 基于Vue2实现动态折扣表格

    基于Vue2实现动态折扣表格

    这篇文章主要为大家详细介绍了如何基于Vue2实现动态折扣表格,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • 关于vue中@click.native.prevent的说明

    关于vue中@click.native.prevent的说明

    这篇文章主要介绍了关于vue中@click.native.prevent的说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue实现侧边菜单栏手风琴效果实例代码

    Vue实现侧边菜单栏手风琴效果实例代码

    本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果,代码很简单,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • 一文带你掌握vue3中侦听器的使用

    一文带你掌握vue3中侦听器的使用

    侦听器和计算属性都可以用于侦听响应式数据的变化,如果需要在数据变化后执行操作,修改依赖项,那么就应该使用侦听器,下面就跟随小编一起来学习一下vue3中侦听器的使用吧
    2023-09-09
  • Vue基础之MVVM,模板语法和数据绑定

    Vue基础之MVVM,模板语法和数据绑定

    这篇文章主要为大家介绍了Vue之MVVM,模板语法和数据绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue的click事件防抖和节流处理详解

    Vue的click事件防抖和节流处理详解

    今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2中,根据list的id进入对应的详情页并修改title方法

    vue2中,根据list的id进入对应的详情页并修改title方法

    今天小编就为大家分享一篇vue2中,根据list的id进入对应的详情页并修改title方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue组件中传值EventBus的使用及注意事项说明

    vue组件中传值EventBus的使用及注意事项说明

    这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue params、query传参使用详解

    vue params、query传参使用详解

    本篇文章主要介绍了vue params、query传参使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论