快捷導(dǎo)航

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

更新時(shí)間：2019年07月31日 15:39:37 作者：詩人的貓咪

這篇文章主要為大家詳細(xì)介紹了vue將后臺(tái)數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在項(xiàng)目中，經(jīng)常會(huì)有后臺(tái)返回一個(gè)時(shí)間戳，頁面展示用的卻是日期格式的情況
不同組件多次使用的話，那么建議在 src 下新建一個(gè) 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: {
   /*
    時(shí)間格式自定義 只需把字符串里面的改成自己所需的格式
   */ 
   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);
};

如果本篇文章對(duì)你有幫助的話，很高興能夠幫助上你。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-i18n結(jié)合Element-ui的配置方法
這篇文章主要介紹了vue-i18n結(jié)合Element-ui的配置方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
vue基礎(chǔ)語法之插值表達(dá)式詳解
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
使用 webpack 插件自動(dòng)生成 vue 路由文件的方法
這篇文章主要介紹了使用 webpack 插件自動(dòng)生成 vue 路由文件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
Vue自定義render統(tǒng)一項(xiàng)目組彈框功能
這篇文章主要介紹了Vue自定義render統(tǒng)一項(xiàng)目組彈框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
解決vue-router中的query動(dòng)態(tài)傳參問題
下面小編就為大家分享一篇解決vue-router中的query動(dòng)態(tài)傳參問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue數(shù)據(jù)雙向綁定的深入探究
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)雙向綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
echarts.js 動(dòng)態(tài)生成多個(gè)圖表使用vue封裝組件操作
這篇文章主要介紹了echarts.js 動(dòng)態(tài)生成多個(gè)圖表使用vue封裝組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue實(shí)現(xiàn)無縫輪播效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
element中一個(gè)單選框radio時(shí)的選中和取消代碼詳解
這篇文章主要給大家介紹了關(guān)于element中一個(gè)單選框radio時(shí)的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,需要的朋友可以參考下
2023-09-09