vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法詳解
更新時(shí)間：2022年12月12日 09:37:41 作者：EvaY_Yang
項(xiàng)目中后臺返回的時(shí)間有多種形式,時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式,下面這篇文章主要給大家介紹了關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下
前言
vue框架中我們常常用el-date-picker標(biāo)簽來顯示和選擇時(shí)間，那么，常見的時(shí)間的格式包含年-月-日（yyyy-MM-dd）、年-月-日 時(shí)-分-秒（yyyy-MM-dd HH-mm-ss）、標(biāo)準(zhǔn)時(shí)間格式以及時(shí)間戳。那么今天我們就來總結(jié)一下常用的獲取方法和它們之間的轉(zhuǎn)換方法。
一、獲取當(dāng)前時(shí)間
先看效果：
Ⅰ. 格式：年-月-日 時(shí)-分-秒（yyyy-MM-dd HH-mm-ss）
<template>
<div>
<h1>vue 時(shí)間格式常見應(yīng)用</h1>
<h3>獲取當(dāng)前時(shí)間（格式：年月日時(shí)分秒）：{{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>Ⅱ.格式：標(biāo)準(zhǔn)時(shí)間
<template>
<div>
<h1>vue 時(shí)間格式常見應(yīng)用</h1>
<h3>獲取當(dāng)前標(biāo)準(zhǔn)時(shí)間（格式：年月日時(shí)分秒）：{{standard_time}}</h3>
</div>
</template>
<script>
export default {
data() {
return {
standard_time:''
}
},
created() {
this.getGMTtime();
},
methods: {
getGMTtime(){
this.standard_time =new Date();
}
}
}
</script>Ⅲ.格式：時(shí)間戳
<template>
<div>
<h1>vue 時(shí)間格式常見應(yīng)用</h1>
<h3>獲取當(dāng)前時(shí)間的時(shí)間戳：{{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>二、時(shí)間格式之間的轉(zhuǎn)換
效果：
Ⅰ.年-月-日 時(shí)-分-秒格式轉(zhuǎn)換成標(biāo)準(zhǔn)時(shí)間
<template>
<h1>時(shí)間格式之間的轉(zhuǎn)換</h1>
<h3>1.年月日時(shí)分秒格式轉(zhuǎn)換成標(biāo)準(zhǔn)時(shí)間</h3>
<div style="display: flex;">
<h5>假如將"2022-08-17 09:54:48"轉(zhuǎn)換成標(biāo)準(zhǔn)時(shí)間格式，則標(biāo)準(zhǔn)格式為：</h5>
<h4>{{conversion_time}}</h4>
</div>
</template>
<script>
export default {
data() {
return {
conversion_time: new Date('2022-08-17 09:54:48')
}
}
}
</script>Ⅱ.標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成年-月-日 時(shí)-分-秒格式
<template>
<h1>時(shí)間格式之間的轉(zhuǎn)換</h1>
<h3>2.標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成年月日時(shí)分秒格式</h3>
<div style="display: flex;">
<h5>假如將"Wed Aug 17 2022 09:54:48 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)"轉(zhuǎn)換成年月日時(shí)分秒格式，則
寫為：</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 (中國標(biāo)準(zhǔn)時(shí)間)');
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>Ⅲ.年-月-日 時(shí)-分-秒格式轉(zhuǎn)換成時(shí)間戳
<template>
<h3>3.年月日時(shí)分秒格式轉(zhuǎn)換成時(shí)間戳</h3>
<div style="display: flex;">
<h5>假如將"2022-08-17 09:54:48"轉(zhuǎn)換成時(shí)間戳，則寫為：</h5>
<h4>{{conversion_time2}}</h4>
</div>
</template>
<script>
export default {
data() {
return {
conversion_time2:Date.parse('2022-08-17 09:54:48')
}
}
}
</script>這時(shí)你是不是有點(diǎn)困惑怎么來判斷轉(zhuǎn)換的時(shí)間戳是否正確呢，我們可以通過在線的轉(zhuǎn)換工具來轉(zhuǎn)換檢測，轉(zhuǎn)換工具網(wǎng)址：時(shí)間戳(Unix timestamp)轉(zhuǎn)換工具 - 在線工具
那下面我們來檢測一下：
所以轉(zhuǎn)換的是沒有問題的！
補(bǔ)充：vue中將任意格式的日期轉(zhuǎn)換為年月日形式（yyyy-MM-dd）
time.js
export const formatDateTime = () => {
let date = new Date();
let timeStr = date.getFullYear() + '-';
timeStr += date.getMonth() + 1 + '-';
timeStr += date.getDate();
return timeStr;
}
頁面中使用
import { formatDateTime } from './time'
mounted() {
? console.log('當(dāng)前時(shí)間：'+ formatDateTime(new Date().getTime())) ? ??
} ?總結(jié)
到此這篇關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)vue時(shí)間格式轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue前端和Django后端如何查詢一定時(shí)間段內(nèi)的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
這篇文章主要給大家介紹了關(guān)于Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue CLI3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
在開發(fā)中我們可能會遇到這樣的問題,文本框聚焦、元素點(diǎn)擊等,所以下面這篇文章主要給大家介紹了關(guān)于javaScript與vue獲取元素的相關(guān)資料,需要的朋友可以參考下2023-10-10
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過渡效果
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過渡效果,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
我們在開發(fā)的時(shí)候會經(jīng)常用的導(dǎo)出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue前端表格導(dǎo)出Excel文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
深入解析Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
詳解基于 axios 的 Vue 項(xiàng)目 http 請求優(yōu)化
這篇文章主要介紹了詳解基于 axios 的 Vue 項(xiàng)目 http 請求優(yōu)化,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
本篇文章主要介紹了詳解Vue 2.0封裝axios筆記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06