16. Vue 过滤器 - 转化时间格式
需求
在上一篇中基本讲诉了Vue过滤器的基本使用，那么在后台管理系统的业务中，使用最多的一个过滤器就是「时间格式的转化」，下面来看看，如何处理。
构建示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 定义一个时间字符串的显示 -->
<p> 时间：{{ ctimeStr }} </p>
<!-- 使用过滤器显示时间 -->
<p> 格式化时间：{{ ctimeStr | formatCtime }} </p>
</div>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
ctimeStr: new Date(), // 定义显示时间
},
methods: {},
filters:{ // 定义局部过滤器
// 格式化时间
formatCtime(dateStr){
return dateStr
}
}
});
</script>
</body>
</html>
页面显示如下：
格式化年月日
formatCtime(dateStr){
// 格式化dateStr时间
var dt = new Date(dateStr);
// 获取年
var year = dt.getFullYear();
// 获取月
var month = dt.getMonth() + 1; // 月份 0 - 11，需要 + 1
// 获取日
var day = dt.getDate();
// 拼接 yyyy-mm-dd
return year + '-' + month + '-' + day
}
下面来看看格式化效果，如下:
模板字符串优化字符串拼接
可以看到已经格式化好了「年月日」了，下一步就是格式化「时分秒」，但是上面有一个可以优化的地方。
return year + '-' + month + '-' + day
这里的字符串拼接可以使用模板字符串的方式进行修改，增强语义，如下：
return `${year}-${month}-${day}` // 模板字符串
设置格式化参数
在时间格式化的常见示例中：
- 格式化年月日 yyyy-mm-dd
- 格式化年月日时分秒 yyyy-mm-dd hh:mm:ss
那么上面应该要有这两个参数的传入，来控制到底需要显示为什么格式。
在过滤器中设置传入的格式化参数，如下：
格式化时分秒
上面已经完成可以格式化两种时间格式，下面来完善时分秒的格式化，如下：
filters:{ // 定义局部过滤器
formatCtime(dateStr, pattern = ""){
// 格式化dateStr时间
var dt = new Date(dateStr);
// 获取年
var year = dt.getFullYear();
// 获取月
var month = dt.getMonth() + 1; // 月份 0 - 11，需要 + 1
// 获取日
var day = dt.getDate();
// 判断格式化是 yyyy-mm-dd 还是 yyyy-mm-dd hh:mm:ss
if (pattern.toLowerCase() === "yyyy-mm-dd"){
// 拼接 yyyy-mm-dd
// return year + '-' + month + '-' + day
return `${year}-${month}-${day}` // 返回yyyy-mm-dd格式化时间
} else{
// 获取小时
var hours = dt.getHours();
// 获取分钟数
var minutes = dt.getMinutes();
// 获取秒数
var secounds = dt.getSeconds();
// 返回 yyyy-mm-dd hh:mm:ss 格式化时间
return `${year}-${month}-${day} ${hours}:${minutes}:${secounds}`
}
}
}
浏览器显示格式化的时间如下：
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
