vue獲取時(shí)間戳轉(zhuǎn)換為日期格式代碼實(shí)例
vue獲取時(shí)間戳轉(zhuǎn)換為日期格式。
方法一為轉(zhuǎn)載黃軼老師的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時(shí)間戳 -->
<div>{{time | formatDate}}</div>
<!-- 輸出結(jié)果 -->
<!-- <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>
方法二為自寫(在百度出的結(jié)果十個(gè)有九個(gè)是上述方法且在不想使用上述方法的情況下):
使用vue.filter
<!-- demo.vue -->
<template>
<!-- time為時(shí)間戳 -->
<div>{{time | formatDate}}</div>
<!-- 結(jié)果為 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獲取時(shí)間戳轉(zhuǎn)換為日期格式詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue如何將時(shí)間戳轉(zhuǎn)換日期格式
- vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
- vue3時(shí)間戳轉(zhuǎn)換(不使用過濾器)
- vue將后臺(tái)數(shù)據(jù)時(shí)間戳轉(zhuǎn)換成日期格式
- Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
- vue將時(shí)間戳轉(zhuǎn)換成自定義時(shí)間格式的方法
- vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式
- vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式
相關(guān)文章
vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
詳解Vue ElementUI手動(dòng)上傳excel文件到服務(wù)器
這篇文章主要介紹了詳解Vue ElementUI手動(dòng)上傳excel文件到服務(wù)器,對(duì)ElementUI感興趣的同學(xué),可以參考下2021-05-05
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開的方法
對(duì)于瀏覽器來說,文本、圖片等可以直接打開的文件,不會(huì)進(jìn)行自動(dòng)下載,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Vue登錄功能實(shí)現(xiàn)全套詳解(含封裝axios)
登錄功能對(duì)于前端剛?cè)腴T不久的同學(xué)來說較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實(shí)現(xiàn)(含封裝axios)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中,PDF文檔的使用非常普遍,因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式,本文我們就來探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕
這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07
vue-router判斷頁面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11

