开发者学堂课程【Vue.js 入门与实战:过滤器-定义格式化时间的全局过滤器】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8147
过滤器-定义格式化时间的全局过滤器
目录
一、全局过滤器的应用演示
二、范例
一、全局过滤器的应用演示
在实例之前通过Vue.filter()
定义过滤器。自定义全局的过滤器,进行时间的格式化。
第一个位置是过滤器的名称 dateformat,function()中传时间字符串 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
演示效果如下图:
二、范例
目前的过滤器只能得到年月日,无法提供时分秒,如果得到更完整的时间,必须对过滤器进行改造。
之间的过滤器规定了返回的格式。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=””)
也可以成功。
演示效果: