最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 21:52:57
文檔

vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式

vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式:前言 在項目中,經(jīng)常會有后臺返回一個時間戳,頁面展示用的卻是日期格式的情況 不同組件多次使用的話,那么建議在 src 下新建一個 common 文件夾,創(chuàng)建 date.js 文件,方便多次復(fù)用 在組件中使用 <template> <div> <p&g
推薦度:
導(dǎo)讀vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式:前言 在項目中,經(jīng)常會有后臺返回一個時間戳,頁面展示用的卻是日期格式的情況 不同組件多次使用的話,那么建議在 src 下新建一個 common 文件夾,創(chuàng)建 date.js 文件,方便多次復(fù)用 在組件中使用 <template> <div> <p&g

前言

在項目中,經(jīng)常會有后臺返回一個時間戳,頁面展示用的卻是日期格式的情況
不同組件多次使用的話,那么建議在 src 下新建一個 common 文件夾,創(chuàng)建 date.js 文件,方便多次復(fù)用

在組件中使用

<template>
 <div>
 <p>{{date1 | formatDate}}</p>
 <p>{{date1 | formatDate2}}</p>
 <p>{{date1 | formatDate3}}</p>
 </div>
</template>
<script>
 import { formatDate } from '@/common/date.js' // 在組件中引用date.js
 export default {
 data() {
 return {
 date1: 1646461131351
 }
 },
 filters: {
 /*
 時間格式自定義 只需把字符串里面的改成自己所需的格式
 */ 
 formatDate(time) {
 var date = new Date(time);
 return formatDate(date, 'yyyy.MM.dd'); 
 },
 formatDate2(time) {
 var date = new Date(time);
 return formatDate(date, 'hh:mm:ss'); 
 },
 formatDate3(time) {
 var date = new Date(time);
 return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss'); 
 }
 }
 }
</script>

效果圖

date.js源碼

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);
};

如果本篇文章對你有幫助的話,很高興能夠幫助上你。

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式

vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式:前言 在項目中,經(jīng)常會有后臺返回一個時間戳,頁面展示用的卻是日期格式的情況 不同組件多次使用的話,那么建議在 src 下新建一個 common 文件夾,創(chuàng)建 date.js 文件,方便多次復(fù)用 在組件中使用 <template> <div> <p&g
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top