vue時間格式總結(jié)以及轉(zhuǎn)換方法詳解
前言
vue框架中我們常常用el-date-picker標(biāo)簽來顯示和選擇時間,那么,常見的時間的格式包含年-月-日(yyyy-MM-dd)、年-月-日 時-分-秒(yyyy-MM-dd HH-mm-ss)、標(biāo)準(zhǔn)時間格式以及時間戳。那么今天我們就來總結(jié)一下常用的獲取方法和它們之間的轉(zhuǎn)換方法。
一、獲取當(dāng)前時間
先看效果:
Ⅰ. 格式:年-月-日 時-分-秒(yyyy-MM-dd HH-mm-ss)
<template> <div> <h1>vue 時間格式常見應(yīng)用</h1> <h3>獲取當(dāng)前時間(格式:年月日時分秒):{{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)時間
<template> <div> <h1>vue 時間格式常見應(yīng)用</h1> <h3>獲取當(dāng)前標(biāo)準(zhǔn)時間(格式:年月日時分秒):{{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 時間格式常見應(yīng)用</h1> <h3>獲取當(dāng)前時間的時間戳:{{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>
二、時間格式之間的轉(zhuǎn)換
效果:
Ⅰ.年-月-日 時-分-秒格式轉(zhuǎn)換成標(biāo)準(zhǔn)時間
<template> <h1>時間格式之間的轉(zhuǎn)換</h1> <h3>1.年月日時分秒格式轉(zhuǎn)換成標(biāo)準(zhǔn)時間</h3> <div style="display: flex;"> <h5>假如將"2022-08-17 09:54:48"轉(zhuǎn)換成標(biāo)準(zhǔn)時間格式,則標(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)時間轉(zhuǎn)換成年-月-日 時-分-秒格式
<template> <h1>時間格式之間的轉(zhuǎn)換</h1> <h3>2.標(biāo)準(zhǔn)時間轉(zhuǎn)換成年月日時分秒格式</h3> <div style="display: flex;"> <h5>假如將"Wed Aug 17 2022 09:54:48 GMT+0800 (中國標(biāo)準(zhǔn)時間)"轉(zhuǎn)換成年月日時分秒格式,則 寫為:</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)時間)'); 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>
Ⅲ.年-月-日 時-分-秒格式轉(zhuǎn)換成時間戳
<template> <h3>3.年月日時分秒格式轉(zhuǎn)換成時間戳</h3> <div style="display: flex;"> <h5>假如將"2022-08-17 09:54:48"轉(zhuǎn)換成時間戳,則寫為:</h5> <h4>{{conversion_time2}}</h4> </div> </template> <script> export default { data() { return { conversion_time2:Date.parse('2022-08-17 09:54:48') } } } </script>
這時你是不是有點困惑怎么來判斷轉(zhuǎn)換的時間戳是否正確呢,我們可以通過在線的轉(zhuǎn)換工具來轉(zhuǎn)換檢測,轉(zhuǎn)換工具網(wǎng)址:時間戳(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)前時間:'+ formatDateTime(new Date().getTime())) ? ?? } ?
總結(jié)
到此這篇關(guān)于vue時間格式總結(jié)以及轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)vue時間格式轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue前端和Django后端如何查詢一定時間段內(nèi)的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue前端和Django后端如何查詢一定時間段內(nèi)的數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02Vue 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í)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11深入解析Vue源碼實例掛載與編譯流程實現(xiàn)思路詳解
這篇文章主要介紹了Vue源碼實例掛載與編譯流程實現(xiàn)思路詳解,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05詳解基于 axios 的 Vue 項目 http 請求優(yōu)化
這篇文章主要介紹了詳解基于 axios 的 Vue 項目 http 請求優(yōu)化,非常具有實用價值,需要的朋友可以參考下2017-09-09