vue時間格式化實例代碼
更新時間：2017年06月13日 17:06:36 作者：22337383
本篇文章主要介紹了vue時間格式化實例代碼，這里整理了詳細的代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下
整理文檔，搜刮出一個vue時間格式化實例代碼，稍微整理精簡一下做下分享。
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);
}
把上面代碼保存為date.js放到你的公共js文件夾中。
在你的需要格式化時間戳的組件里像下面這樣使用：
<template>
<!-- 過濾器 -->
<div>{{time | formatDate}}</div>
<!-- 輸出結(jié)果 -->
<!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
data() {
return {
time:1469281964000
}
},
filters: {
formatDate(time) {
var date = new Date(time);
return formatDate(date, yyyy-MM-dd hh:mm);
}
}
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解如何在Vue里建立長按指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
cross-env 是一個非常實用的 Node.js 包,它允許你跨平臺（Windows, macOS, Linux）使用環(huán)境變量,這對于在不同的操作系統(tǒng)上運行腳本時保持一致性非常有用,這篇文章主要介紹了vue cross-env使用和配置方法,需要的朋友可以參考下2024-08-08
Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了vue使用反向代理解決跨域問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
在本篇文章里小編給大家整理的是關(guān)于vue實現(xiàn)百度語音合成的實例內(nèi)容，以及相關(guān)代碼，需要的朋友們參考下。2019-10-10
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
React組件通信之路由傳參(react-router-dom)
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
動態(tài)路由可以根據(jù)不同用戶登錄獲取不一樣的路由層級,可隨時調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)動態(tài)路由的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作
這篇文章主要介紹了vue實現(xiàn)頁面上傳文件夾壓縮后傳給服務(wù)器的操作,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04