0
点赞
收藏
分享

微信扫一扫

20. 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>

页面显示如下:


20. Vue 过滤器 - 转化时间格式_字符串


格式化年月日


20. Vue 过滤器 - 转化时间格式_html_02


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
}

下面来看看格式化效果,如下:


20. Vue 过滤器 - 转化时间格式_格式化时间_03


模板字符串优化字符串拼接

可以看到已经格式化好了年月日了,下一步就是格式化时分秒,但是上面有一个可以优化的地方。

return year + '-' + month + '-' + day

这里的字符串拼接可以使用模板字符串的方式进行修改,增强语义,如下:

return `${year}-${month}-${day}` // 模板字符串

设置格式化参数

在时间格式化的常见示例中:

  • 格式化年月日 yyyy-mm-dd
  • 格式化年月日时分秒 yyyy-mm-dd hh:mm:ss

那么上面应该要有这两个参数的传入,来控制到底需要显示为什么格式。


20. Vue 过滤器 - 转化时间格式_格式化时间_04


在过滤器中设置传入的格式化参数,如下:


20. Vue 过滤器 - 转化时间格式_字符串_05


格式化时分秒

上面已经完成可以格式化两种时间格式,下面来完善时分秒的格式化,如下:


20. Vue 过滤器 - 转化时间格式_html_06


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}`
}


}

}

浏览器显示格式化的时间如下:


20. Vue 过滤器 - 转化时间格式_格式化时间_07

20. Vue 过滤器 - 转化时间格式_html_08


举报

相关推荐

0 条评论