您的位置：首页 > Web前端 > Vue.js

vue学习-前端处理时间格式问题

2020-02-07 00:39 381 查看

定义一个过滤器处理前端时间格式问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{date | dateFilter("yyyy/mm/dd hh:mm:ss")}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
date: new Date()
},
filters: {
dateFilter: function (data, format = "") {
var dt = new Date(data);
var y = dt.getFullYear();
var m = (dt.getMonth()+1).toString().padStart(2,"0");
var d = dt.getDate().toString().padStart(2,"0");
var h = dt.getHours().toString().padStart(2,"0");
var mm = dt.getMinutes().toString().padStart(2,"0");
var s = dt.getSeconds().toString().padStart(2,"0");
if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
format.toLocaleLowerCase() === "") {
return `${y}-${m}-${d}`;
} else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
return `${y}/${m}/${d}`;
} else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
return `${y}-${m}-${d} ${h}:${mm}:${s}`;
} else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
return `${y}/${m}/${d} ${h}:${mm}:${s}`;
} else {
return `输入的时间格式有误`;
}
}
}
});

</script>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
哎呦0.0 发布了18 篇原创文章 · 获赞 0 · 访问量 947 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航