vue實現(xiàn)將時間戳轉(zhuǎn)換成日期格式
更新時間：2023年10月10日 14:55:51 作者：yumihe
這篇文章主要介紹了vue實現(xiàn)將時間戳轉(zhuǎn)換成日期格式方式,具有很好的參考價值,希望對大家有所幫助,
vue將時間戳轉(zhuǎn)換成日期格式
（1）創(chuàng)建一個處理時間格式的js，內(nèi)容如下：
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}（2）在vue文件中需要格式化時間戳的地方，使用filters過濾器，做如下處理：
<template>
<div class="date">{{item.pass_time | formatDate}}</div>
</template>
<script type="text/ecmascript-6">
import {formatDate} from 'common/js/date'
export default {
filters: {
formatDate(time) {
time = time * 1000
let date = new Date(time)
console.log(new Date(time))
return formatDate(date, 'yyyy-MM-dd hh:mm')
}
}
}
</script>補充：
time應為格式為13位unix時間戳，如果拿到的時間戳是10位的unix時間戳，因此需要乘以1000。
vue時間戳的用法
1.新建一個js文件用來存放時間格式的代碼
代碼如下：
export function timestampToTime(timestamp) {
? ? let now = new Date(timestamp*1000);
? ? let year = now.getFullYear(); ? ?
? ? let month = now.getMonth()+1; ? ?
? ? let date = now.getDate(); ? ?
? ? let hour = now.getHours(); ? ?
? ? let minute = now.getMinutes(); ? ?
? ? let second = now.getSeconds(); ? ?
? ? return year+"-"+month+"-"+date+" ? "+hour+":"+minute+":"+second;
}2.在需要對時間戳進行格式化處理的組件中引入上面的js文件
代碼如下（示例）：
import {timestampToTime} from "@/src/utils/formdate.js"
//對時間進行格式化
date=timestampToTime(time)總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中使用TypeScript的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue 組件注冊,結(jié)合實例形式較為詳細的分析了vue.js組件的常見分類、注冊方法及相關操作注意事項,需要的朋友可以參考下2019-02-02
在Vue?3的單文件組件（.vue?文件）中,組件可以從多個層面來理解,下面我將詳細說明哪些部分算是組件,以及如何識別它們,感興趣的朋友跟隨小編一起看看吧2026-03-03
這篇文章主要介紹了vue中用 async/await 來處理異步操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
圖片裁剪功能無論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗的關鍵一環(huán),本文將詳細介紹如何在Vue.js項目中集成并使用Cropper.js實現(xiàn)一個強大的圖片裁剪組件,需要的可以參考下2024-11-11
在vue中實現(xiàn)在線預覽PDF文件我們可以使用vue-pdf來實現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進行渲染。條件用到的是v-if、v-else-if以及v-else來組合實現(xiàn)的，有時候我們想要在一個條件中加載多個html元素，那么我們可以通過template元素上實現(xiàn)，下面就來看看具體實現(xiàn)吧2021-10-10
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06