前言
【vue js日期时间格式化】使用vue开发中,后台传过来的数据含有时间日期的通常前端都要做进一步做处理或者格式化,常用的是使用filter来过滤数据,换一种思路,前端拿到的时间日期数据一般是一串数字的时间戳,或者是一个字符串的时间日期,所以我们可以在 String 和 Number 里定义一个格式化函数,从而实现格式化时间日期。
// /utils/index.js
function dateFormatInit() {
String.prototype.dateFormat = Number.prototype.dateFormat = function(
fmt = "yyyy-mm-dd HH:MM:SS"
) {
let date = new Date(this);
let fmtDate = fmt;
// 转化时间
let o = {
"y+": date.getFullYear(),
"m+": date.getMonth() + 1,
"d+": date.getDate(),
"H+": date.getHours(),
"M+": date.getMinutes(),
"S+": date.getSeconds()
};
for (let key in o) {
// 正则
let rep = new RegExp(`${key}`);
// 是所需要的格式
if (rep.test(fmt)) {
fmtDate = fmtDate.match(rep) // 有匹配到所对应格式
? fmtDate.replace(
fmt.match(rep)[0], // 将原来的格式进行值的替换 例如 yyyy - 2019
// String(o[key]).padStart(fmt.match(rep)[0].length, "0") // ES2017写法
String(o[key]).length === 1 ? `0${o[key]}` : `${o[key]}` // 例 小时为 7 时,在前面加上 0 ,变成 07
)
: "";
}
}return fmtDate;
};
}
dateFormatInit();
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/utils/";
Vue.config.productionTip = false;
let a = 1560722201293;
// 时间戳
let b = "2019/05/05 07:15:10";
// 字符串 时间日期console.log(a.dateFormat("yyyy-mm-dd"));
console.log(b.dateFormat("yyyy-mm-dd HH:MM:SS"));
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换