快捷導(dǎo)航

vue中對(duì)時(shí)間戳的處理方式

更新時(shí)間：2022年06月02日 11:39:08 作者：Gorgio_Liu

這篇文章主要介紹了vue中對(duì)時(shí)間戳的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue對(duì)時(shí)間戳的處理

1、自建js文件

文件位置根據(jù)自己的項(xiàng)目位置自定義

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);
};

2、在組件模板中引用定義好的時(shí)間戳函數(shù)

<template>
? ? <div>{{time | formatDate}}</div>
</template>

3、設(shè)置好在script中的引用和定義

<script>
import {formatDate} from 'xxx.js';
export default {
? ? filters: {
? ? ? ? formatDate(time) {
? ? ? ? ? ? var date = new Date(time);
? ? ? ? ? ? return formatDate(date, 'yyyy-MM-dd hh:mm');
? ? ? ? }
? ? }
}
</script>

vue時(shí)間戳轉(zhuǎn)換

后臺(tái)拿時(shí)間數(shù)據(jù)，一般不是時(shí)間格式，而是一串?dāng)?shù)組，這個(gè)時(shí)候就需要轉(zhuǎn)換，然后才可以使用了

?add_time(row, column, cellValue, index) {
? ? ? ? if (cellValue == null || cellValue == "") return "";
? ? ? ? let date = new Date(parseInt(cellValue) * 1000);
? ? ? ? let Y = date.getFullYear() + '-';
? ? ? ? let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
? ? ? ? let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
? ? ? ? let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
? ? ? ? let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
? ? ? ? let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
? ? ? ? return Y + M + D;
? ? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue嵌套路由的各種用法詳解
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁(yè)面應(yīng)用（SPA）時(shí)的常用組合,通過(guò)嵌套路由,可以實(shí)現(xiàn)多級(jí)頁(yè)面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場(chǎng)景的詳細(xì)介紹,需要的朋友可以參考下
2025-01-01
vue動(dòng)態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個(gè)動(dòng)態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI
,本文通過(guò)圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
淺談vue引入css,less遇到的坑和解決方法
下面小編就為大家分享一篇淺談vue引入css,less遇到的坑和解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
Vue3+ElementPlus 表單組件的封裝實(shí)例
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
vue項(xiàng)目配置element-ui容易遇到的坑及解決
這篇文章主要介紹了vue項(xiàng)目配置element-ui容易遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue路由傳參的三種方式實(shí)例詳解
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01