过滤器-定义格式化时间的全局过滤器|学习笔记

简介: 快速学习过滤器-定义格式化时间的全局过滤器

开发者学堂课程【Vue.js 入门与实战过滤器-定义格式化时间的全局过滤器】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8147


过滤器-定义格式化时间的全局过滤器


目录

一、全局过滤器的应用演示

二、范例

 

一、全局过滤器的应用演示

在实例之前通过Vue.filter() 定义过滤器。自定义全局的过滤器,进行时间的格式化。

第一个位置是过滤器的名称 dateformatfunction()中传时间字符串 dateStr

Vue.filter('dateformat',function(dateStr) {

//不使用 moment 插件进行编写,var dt = new Date(),如果不传任何参数,data 就表示当前的时间。

dateStr 传入根据给定的时间字符串,得到特定的时间

var dt = new Date(datestr)

//拼接合法的日期格式,yyyy-mm-dd,分别获取到年月日,再用“-“串联。

var y=dt.getrullYear()//得到四位数年份

var m=dt.getMonth()+1//month 从0开始,所以要+1

var d = dt.getDate()//得到某天,如果使用 getDay 得到的是星期几。

//return y+’-’+’m’+’-’+d 这样书写比较乱,所以可以使用模板字符串:Return`yyyy-mmm-dd`,把 yyyy”var y 中的“y“替换。

使用如下写法:

Return`${y}-${m}-$ {d}`// 相对于上面的写法,可读性更好,更容易理解。y m d 都分别是变量

} )

//这里就定义好了过滤器。

{{item.ctim|dataformat}}

//调用广告符,把 ctim 交给 dataformat

演示效果如下图:

image.png

 

二、范例

目前的过滤器只能得到年月日,无法提供时分秒,如果得到更完整的时间,必须对过滤器进行改造。

之间的过滤器规定了返回的格式。Vue.filter('dateformat',function(dateStr,pattern) {//传递一个可视化的字符串 pattern ,在调用时可以传pattern 值,比如{item.ctim|dataformat(‘yyyy-MM-DD’)},但是这样无法保证传递的值是大写小写。所以拿到值要先进行tolower case。

var dt = new Date(datestr)

//yyyy-mm-dd

var y=dt.getrullYear()

var m=dt.getMonth()+1

var d = dt.getDate()

//return y+’-’+’m’+’-’+d

If (pattern.tolower case() ===" yyyy-mm-dd') {//判断 pattern 值,tolower case()统一小写,便于比较。

Return ‘$(y)-$(m)-$(d)

} else {//获取时分秒

var hh =dt.getHours()

var mm =dt.getMinutes()

var ss = dt.getSeconds()

return`${y}-${m}-${d}  ${hh}:${mm}:${ss} `//不能把格式写固定。

}

} )

表示如果传过来的 pattern 转小写后等于”yyyy-mm-dd”,那么会获取年月日的时间,如果不等于yyyy-mm-dd”,表示需要获取更全的时间,时分秒。

调用:{{item.ctim|dataformat(‘’)}}

这里虽然没有传格式,但是传了参数,一个空字符串。如果不传参数,pattern 就没有值,形参不传就等于 undefined 就不能调用 tolower case

否则就会报错。要防止这个问题,可以设置 If (pattern.&& pattern tolower case() ===" yyyy-mm-dd')把 pattern 转换为 true 执行后面的步骤。

对这种方式进行优化,把

Vue.filter('dateformat',function(dateStr,pattern)

设置为Vue.filter('dateformat',function(dateStr,pattern=””)也可以成功。

演示效果:

image.png

相关文章
|
1月前
|
安全 Python
Flask过滤器与自定义过滤器的用法
Flask过滤器与自定义过滤器的用法
21 4
|
6月前
|
存储 Python
自定义模板过滤器
自定义模板过滤器
39 1
|
6月前
时间过滤器
时间过滤器
|
JavaScript
过滤器(filter)的基本使用 + 时间戳转化为相对日期过滤器代码封装
过滤器(filter)的基本使用 + 时间戳转化为相对日期过滤器代码封装
77 0
|
API 微服务
全局过滤器 GlobalFilter
全局过滤器 GlobalFilter
265 0
过滤器简介--操作步骤--过滤器生命周期--过滤器匹配规则-- 过滤器链
过滤器简介--操作步骤--过滤器生命周期--过滤器匹配规则-- 过滤器链
65 0
Filter过滤器概念及生命周期
Filter过滤器概念及生命周期
155 0
|
前端开发
前端学习笔记202303学习笔记第五天-私有过滤器和全局过滤器
前端学习笔记202303学习笔记第五天-私有过滤器和全局过滤器
68 0
|
JavaScript 开发者
过滤器-定义格式化时间的全局过滤器|学习笔记
快速学习过滤器-定义格式化时间的全局过滤器
过滤器-定义格式化时间的全局过滤器|学习笔记
|
JavaScript 开发者
过滤器-定义私有过滤器|学习笔记
快速学习过滤器-定义私有过滤器
117 0
过滤器-定义私有过滤器|学习笔记
下一篇
无影云桌面