首页 > 编程 > JavaScript > 正文

vue将后台数据时间戳转换成日期格式

2019-11-19 11:05:48
字体:
来源:转载
供稿:网友

前言

在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况
不同组件多次使用的话,那么建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用

在组件中使用

<template> <div>  <p>{{date1 | formatDate}}</p>  <p>{{date1 | formatDate2}}</p>  <p>{{date1 | formatDate3}}</p> </div></template><script> import { formatDate } from '@/common/date.js' // 在组件中引用date.js export default {  data() {   return {    date1: 1646461131351   }  },  filters: {   /*    时间格式自定义 只需把字符串里面的改成自己所需的格式   */    formatDate(time) {    var date = new Date(time);    return formatDate(date, 'yyyy.MM.dd');    },   formatDate2(time) {    var date = new Date(time);    return formatDate(date, 'hh:mm:ss');    },   formatDate3(time) {    var date = new Date(time);    return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');    }  } }</script>

效果图

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

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表