vue獲取時間戳轉換為日期格式代碼實例
更新時間：2019年04月17日 09:36:32 作者：西風XF
這篇文章主要介紹了vue獲取時間戳轉換為日期格式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
vue獲取時間戳轉換為日期格式。
方法一為轉載黃軼老師的format方法：出處（黃軼老師github https://github.com/ustbhuangyi）；
// 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);
};
<!-- **.vue -->
<template>
<!-- time時間戳 -->
<div>{{time | formatDate}}</div>
<!-- 輸出結果 -->
<!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
filters: {
formatDate(time) {
var date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
}
}
</script>
方法二為自寫（在百度出的結果十個有九個是上述方法且在不想使用上述方法的情況下）：
使用vue.filter
<!-- demo.vue -->
<template>
<!-- time為時間戳 -->
<div>{{time | formatDate}}</div>
<!-- 結果為 2018-01-23 18:31:35 -->
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
time: 1516703495241
};
},
filters: {
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
以上所述是小編給大家介紹的vue獲取時間戳轉換為日期格式詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了vue子路由跳轉實現tab選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解Vue ElementUI手動上傳excel文件到服務器
這篇文章主要介紹了詳解Vue ElementUI手動上傳excel文件到服務器，對ElementUI感興趣的同學，可以參考下2021-05-05
vue中的<template>標簽與react中的<></>標簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標簽與react中的<></>標簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
對于瀏覽器來說,文本、圖片等可以直接打開的文件,不會進行自動下載,下面這篇文章主要給大家介紹了關于Vue實現下載文件而非瀏覽器直接打開的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
Vue3 組合式函數Composable最佳實戰(zhàn)
這篇文章主要為大家介紹了Vue3 組合式函數Composable最佳實戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
登錄功能對于前端剛入門不久的同學來說較為困難,下面這篇文章主要給大家介紹了關于Vue登錄功能實現(含封裝axios)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
在現代Web應用中，PDF文檔的使用非常普遍，因為它可以在各種設備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
vue?element-ui如何在el-tabs組件最右側添加按鈕
這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側添加按鈕問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數的。下面小編講解并附上代碼分析展現在文章里，感興趣的小伙伴不要錯過奧2021-09-09
vue-router判斷頁面未登錄自動跳轉到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉到登錄頁的方法示例,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11