vue實(shí)現(xiàn)將時(shí)間戳轉(zhuǎn)換成日期格式
更新時(shí)間：2023年10月10日 14:55:51 作者：yumihe
這篇文章主要介紹了vue實(shí)現(xiàn)將時(shí)間戳轉(zhuǎn)換成日期格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
vue將時(shí)間戳轉(zhuǎn)換成日期格式
（1）創(chuàng)建一個(gè)處理時(shí)間格式的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文件中需要格式化時(shí)間戳的地方，使用filters過(guò)濾器，做如下處理：
<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>補(bǔ)充：
time應(yīng)為格式為13位unix時(shí)間戳，如果拿到的時(shí)間戳是10位的unix時(shí)間戳，因此需要乘以1000。
vue時(shí)間戳的用法
1.新建一個(gè)js文件用來(lái)存放時(shí)間格式的代碼
代碼如下：
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.在需要對(duì)時(shí)間戳進(jìn)行格式化處理的組件中引入上面的js文件
代碼如下（示例）：
import {timestampToTime} from "@/src/utils/formdate.js"
//對(duì)時(shí)間進(jìn)行格式化
date=timestampToTime(time)總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用TypeScript的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue 組件注冊(cè),結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js組件的常見(jiàn)分類、注冊(cè)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
在Vue?3的單文件組件（.vue?文件）中,組件可以從多個(gè)層面來(lái)理解,下面我將詳細(xì)說(shuō)明哪些部分算是組件,以及如何識(shí)別它們,感興趣的朋友跟隨小編一起看看吧2026-03-03
vue中用 async/await 來(lái)處理異步操作
這篇文章主要介紹了vue中用 async/await 來(lái)處理異步操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue使用Cropper實(shí)現(xiàn)圖片裁剪功能
圖片裁剪功能無(wú)論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗(yàn)的關(guān)鍵一環(huán),本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成并使用Cropper.js實(shí)現(xiàn)一個(gè)強(qiáng)大的圖片裁剪組件,需要的可以參考下2024-11-11
在vue中實(shí)現(xiàn)在線預(yù)覽PDF文件我們可以使用vue-pdf來(lái)實(shí)現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進(jìn)行渲染。條件用到的是v-if、v-else-if以及v-else來(lái)組合實(shí)現(xiàn)的，有時(shí)候我們想要在一個(gè)條件中加載多個(gè)html元素，那么我們可以通過(guò)template元素上實(shí)現(xiàn)，下面就來(lái)看看具體實(shí)現(xiàn)吧2021-10-10
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06