vue3時(shí)間戳轉(zhuǎn)換（不使用過(guò)濾器）
更新時(shí)間：2021年12月16日 11:33:08 作者：快樂(lè)編程
這篇文章主要介紹了vue3時(shí)間戳轉(zhuǎn)換，?vue2轉(zhuǎn)換時(shí)間戳的時(shí)候一般使用過(guò)濾器的方式，到vue3之后，vue3移除了過(guò)濾器，就不能再用了，官方是推薦使用方法或者計(jì)算屬性的方式。下面我們來(lái)看看詳細(xì)介紹吧</P><P>
?vue2轉(zhuǎn)換時(shí)間戳的時(shí)候一般使用過(guò)濾器的方式，到vue3之后，vue3移除了過(guò)濾器，就不能再用了，官方是推薦使用方法或者計(jì)算屬性的方式。
下面寫(xiě)了一個(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ò)濾器）的文章就介紹到這了,更多相關(guān)vue3時(shí)間戳轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
element-UI el-table修改input值視圖不更新問(wèn)題
這篇文章主要介紹了element-UI el-table修改input值視圖不更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue基本使用之對(duì)象提供的屬性功能實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
vue如何解決el-select下拉框顯示ID不顯示label問(wèn)題
這篇文章主要介紹了vue如何解決el-select下拉框顯示ID不顯示label問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用，這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)tab路由切換組件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)tab路由切換組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue配置marked鏈接添加target="_blank"的方法
這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法，文中給大家提到了vue實(shí)現(xiàn)類似target="_blank"打開(kāi)新窗口的代碼,感興趣的朋友參考下吧2019-07-07
這篇文章主要介紹了解讀Vue實(shí)例的屬性及模板渲染問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue高德地圖，帶你玩轉(zhuǎn)周邊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06