目录

• 前言
• 一、获取当前时间
• Ⅰ. 格式：年-月-日 时-分-秒（yyyy-MM-dd HH-mm-ss）
• Ⅱ.格式：标准时间
• Ⅲ.格式：时间戳
• 二、时间格式之间的转换
• Ⅰ.年-月-日 时-分-秒格式转换成标准时间
• Ⅱ.标准时间转换成年-月-日 时-分-秒格式
• Ⅲ.年-月-日 时-分-秒格式转换成时间戳
• 补充：vue中将任意格式的日期转换为年月日形式（yyyy-MM-dd）
• 总结

前言

vue框架中我们常常用el-date-picker标签来显示和选择时间，那么，常见的时间的格式包含年-月-日（yyyy-MM-dd）、年-月-日 时-分-秒（yyyy-MM-dd HH-mm-ss）、标准时间格式以及时间戳。那么今天我们就来总结一下常用的获取方法和它们之间的转换方法。

一、获取当前时间

先看效果：

Ⅰ. 格式：年-月-日 时-分-秒（yyyy-MM-dd HH-mm-ss）

<template>
    <div>
		<h>vue 时间格式常见应用</h1>
		<h>获取当前时间（格式：年月日时分秒）：{{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() +) < 10 ? '0' + (new             
                    Date().getMonth() +) : (new Date().getMonth() + 1)
				const dd = new Date().getDate() < ? '0' + new Date().getDate() : new 
                    Date().getDate()
				const HH = new Date().getHours() < ? '0' + new Date().getHours() : new 
                    Date().getHours()
				const mm = new Date().getMinutes() < ? '0' + new Date().getMinutes() : 
                     new Date().getMinutes()
				const ss = new Date().getSeconds() < ? '0' + new Date().getSeconds() : 
                     new Date().getSeconds()
				this.time = yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss;
			}
		}
	}
</script>

Ⅱ.格式：标准时间

<template>
    <div>
		<h>vue 时间格式常见应用</h1>
		<h>获取当前标准时间（格式：年月日时分秒）：{{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>
		<h>vue 时间格式常见应用</h1>
		<h>获取当前时间的时间戳：{{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>
   <h>时间格式之间的转换</h1>
	<h>1.年月日时分秒格式转换成标准时间</h3>
	<div style="display: flex;">
		<h>假如将"2022-08-17 09:54:48"转换成标准时间格式，则标准格式为：</h5>
		<h>{{conversion_time}}</h4>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				conversion_time: new Date('-08-17 09:54:48')
			}
		}
	}
</script>

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

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

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

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

 那下面我们来检测一下：

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

补充：vue中将任意格式的日期转换为年月日形式（yyyy-MM-dd）

time.js

export const formatDateTime = () => {
    let date = new Date();
    let timeStr = date.getFullYear() + '-';
    timeStr += date.getMonth() + + '-';
    timeStr += date.getDate();
    return timeStr;
}

页面中使用

import { formatDateTime } from './time'

mounted() {
  console.log('当前时间：'+ formatDateTime(new Date().getTime()))     
}