vue3時(shí)間戳轉(zhuǎn)換（不使用過濾器）
更新時(shí)間：2021年12月16日 11:33:08 作者：快樂編程
這篇文章主要介紹了vue3時(shí)間戳轉(zhuǎn)換，?vue2轉(zhuǎn)換時(shí)間戳的時(shí)候一般使用過濾器的方式，到vue3之后，vue3移除了過濾器，就不能再用了，官方是推薦使用方法或者計(jì)算屬性的方式。下面我們來看看詳細(xì)介紹吧</P><P>
?vue2轉(zhuǎn)換時(shí)間戳的時(shí)候一般使用過濾器的方式，到vue3之后，vue3移除了過濾器，就不能再用了，官方是推薦使用方法或者計(jì)算屬性的方式。
下面寫了一個(gè)Time.ts的文件，可以針對(duì)時(shí)間戳進(jìn)行轉(zhuǎn)換：
class Time {
// 格式化時(shí)間
public formatTime(time: number) {
let date = new Date(time * 1000);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
return year + "-" + month.toString().padStart(2, "0") + "-" + day.toString().padStart(2, "0")
+ " " + hour.toString().padStart(2, "0") + ":" + minute.toString().padStart(2, "0")
+ ":" + second.toString().padStart(2, "0");
}
}
const time = new Time();
export default time;
使用的話，只要在模板調(diào)用這個(gè)方法，然后傳入對(duì)應(yīng)的時(shí)間戳就可以了。
{{ time.formatTime(timestamp) }}
顯示的效果：
2021-05-17 10:59:59
目前只能轉(zhuǎn)換成如上格式，如果需要更多的格式，可以在formatTime增加第2個(gè)參數(shù)，表示格式化的時(shí)間格式，然后依著轉(zhuǎn)化就行了。
到此這篇關(guān)于vue3時(shí)間戳轉(zhuǎn)換（不使用過濾器）的文章就介紹到這了,更多相關(guān)vue3時(shí)間戳轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄猇ue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本篇文章通過實(shí)例給大家分享了vue自動(dòng)化表單的操作方法以及相關(guān)的代碼做了描述，有興趣的朋友可以跟著學(xué)習(xí)下。2018-05-05
在本篇文章里小編給大家分享了關(guān)于VUE前后端學(xué)習(xí)tab寫法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-08-08
Vue中使用XMLHttpRequest（XHR）可以獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同，本文主要來和大家講講它的正確使用方法，希望對(duì)大家有所幫助2023-05-05
在本文中我們給大家整理了關(guān)于Vue項(xiàng)目服務(wù)器部署之子目錄部署方法和具體步驟，需要的朋友們參考下。2019-05-05
某些場(chǎng)景下建議vue query代替pinia原理解析
這篇文章主要為大家介紹了某些場(chǎng)景下建議vue-query代替pinia原理解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁,需要的朋友可以參考下2022-04-04
自定義指令，其實(shí)就是在vue提供的鉤子中寫代碼，這篇文章將從源碼的角度，帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用，需要的可以參考一下2023-05-05
Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法
在項(xiàng)目開發(fā)中，如果使用到了 vuex，通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請(qǐng)求,業(yè)務(wù)邏輯寫在 actions 中，本文給大家分享完整流程需要的朋友可以參考下2022-11-11
眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會(huì)渲染出一個(gè)可以滾動(dòng)并用于顯示剩余界面的條 -- 滾動(dòng)條,它可以簡(jiǎn)單的樣式修改,但是位置是固定的,無法移動(dòng),而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫一個(gè)2023-10-10