vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例

更新時間：2018年09月16日 10:10:12 作者：小穗子

今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

過濾器-時間戳轉(zhuǎn)化

第一步：定義過濾器，filters.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);
 };

第二步：在所用之處引入filters.js

import {formatDate} from '../../common/filters.js'

第三步：使用

filters:{
 formatDate(time){
  var data = new Date(time);
  return formatDate(data,'yyyy-MM-dd');
 }
 },

<span>{{item.rateTime | formatDate}}</span>

以上這篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中import from@符號指的是什么意思
這篇文章主要介紹了Vue中import from@符號指的是意思,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實(shí)現(xiàn)前端展示后端實(shí)時日志帶顏色示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)前端展示后端實(shí)時日志帶顏色示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當(dāng)市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫,下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下
2022-09-09
Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn)
這篇文章主要介紹了Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
vue3.0+element Plus實(shí)現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
這篇文章主要介紹了vue3.0+element Plus實(shí)現(xiàn)頁面布局，側(cè)邊欄菜單路由跳轉(zhuǎn),需要的朋友可以參考下
2023-07-07
vue+echarts實(shí)現(xiàn)可拖動節(jié)點(diǎn)的折線圖（支持拖動方向和上下限的設(shè)置）
制作一個折線圖用于顯示當(dāng)前24小時的數(shù)據(jù)，并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實(shí)現(xiàn)可拖動節(jié)點(diǎn)的折線圖（支持拖動方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧
2019-04-04
詳解使用jest對vue項(xiàng)目進(jìn)行單元測試
這篇文章主要介紹了詳解使用jest對vue項(xiàng)目進(jìn)行單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
大文件下載,花費(fèi)的時間比較長,沒有任何提示,用戶體驗(yàn)很差,需要優(yōu)化,提示文件在下載中,并且顯示進(jìn)度百分比,下面小編給大家?guī)砹薞ue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,感興趣的朋友一起看看吧
2024-03-03
vue自定義js圖片碎片輪播圖切換效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義js圖片碎片輪播圖切換效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2019-04-04
vue實(shí)現(xiàn)h5掃碼的代碼示例
html5-qrcode是一個基于JavaScript?輕量級和跨平臺的掃碼插件,允許用戶使用攝像頭掃描二維碼,并且解析為文本或者url,本文給大家介紹了vue實(shí)現(xiàn)h5掃碼,需要的朋友可以參考下
2024-01-01