vue中如何將日期轉(zhuǎn)換為指定的格式
vue將日期轉(zhuǎn)換為指定的格式
方案一
這個(gè)方法是我覺得特別好用的:
寫一個(gè)轉(zhuǎn)換日期的方法,直接使用就可以
//時(shí)間格式化函數(shù),此處僅針對yyyy-MM-dd hh:mm:ss 的格式進(jìn)行格式化 dateFormat:function(time) { ? ? var date=new Date(time); ? ? var year=date.getFullYear(); ? ? /* 在日期格式中,月份是從0開始的,因此要加0 ? ? ?* 使用三元表達(dá)式在小于10的前面加0,以達(dá)到格式統(tǒng)一 ?如 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; }
使用的時(shí)候,直接調(diào)用:
{{dateFormat(create_time)}} this.dateFormat(new Date())
結(jié)果:
方案二
vue中使用moment格式轉(zhuǎn)換日期:
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
但是這個(gè)會有一點(diǎn)問題就是:
下午的時(shí)間,還是1、2、3這種的
例如:
下午時(shí)間
2019-1-1 01:10:10
大家根據(jù)需求選擇合適的。
vue時(shí)間格式總結(jié)及轉(zhuǎ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)換的是沒有問題的!
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue2實(shí)現(xiàn)動態(tài)折扣表格
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)動態(tài)折扣表格,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01關(guān)于vue中@click.native.prevent的說明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果實(shí)例代碼
本文通過一段簡單的代碼給大家介紹了基于純vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果,代碼很簡單,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05Vue基礎(chǔ)之MVVM,模板語法和數(shù)據(jù)綁定
這篇文章主要為大家介紹了Vue之MVVM,模板語法和數(shù)據(jù)綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12vue2中,根據(jù)list的id進(jìn)入對應(yīng)的詳情頁并修改title方法
今天小編就為大家分享一篇vue2中,根據(jù)list的id進(jìn)入對應(yīng)的詳情頁并修改title方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue組件中傳值EventBus的使用及注意事項(xiàng)說明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11