快捷導(dǎo)航

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

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

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

前言

在項(xiàng)目中，經(jīng)常會(huì)有后臺(tái)返回一個(gè)時(shí)間戳，頁(yè)面展示用的卻是日期格式的情況
不同組件多次使用的話，那么建議在 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ì)你有幫助的話，很高興能夠幫助上你。

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

您可能感興趣的文章:

相關(guān)文章

Vue.js事件處理器與表單控件綁定詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue項(xiàng)目中引入外部腳本的多種方式
在現(xiàn)代的前端開(kāi)發(fā)中,我們經(jīng)常需要使用一些第三方的外部腳本或庫(kù),尤其是像地圖、圖表、分析工具等,在 Vue 項(xiàng)目中,有多種方式可以引入外部腳本,本文將詳細(xì)介紹在 Vue 項(xiàng)目中引入外部腳本的幾種常見(jiàn)方法,需要的朋友可以參考下
2025-01-01
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過(guò)performance.now()獲取動(dòng)畫(huà)的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫(huà),結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
Vue keepAlive 數(shù)據(jù)緩存工具實(shí)現(xiàn)返回上一個(gè)頁(yè)面瀏覽的位置
這篇文章主要介紹了Vue keepAlive 數(shù)據(jù)緩存工具，實(shí)現(xiàn)返回上一個(gè)頁(yè)面瀏覽的位置，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁(yè)功能
這篇文章主要介紹了Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁(yè)功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
Vue-CLI項(xiàng)目中路由傳參的方式詳解
這篇文章主要介紹了Vue-CLI項(xiàng)目中路由傳參的方式詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-03-03
vue使用JSON編輯器:vue-json-editor詳解
文章介紹了如何在Vue項(xiàng)目中使用JSON編輯器插件`vue-json-editor`,包括安裝、引入、注冊(cè)和使用示例,通過(guò)這些步驟,用戶可以在Vue應(yīng)用中輕松實(shí)現(xiàn)JSON數(shù)據(jù)的編輯功能,文章最后呼吁大家支持腳本之家
2025-01-01
詳解Vue-基本標(biāo)簽和自定義控件
本篇文章主要介紹了Vue-基本標(biāo)簽和自定義控件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
vue中css如何使用data中的變量
這篇文章主要介紹了vue中css如何使用data中的變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03