开发者学堂课程【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 都分别是变量 } ) //这里就定义好了过滤器。 <td>{{item.ctim|dataformat}}<td> //调用广告符,把 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”，表示需要获取更全的时间，时分秒。
调用：<td>{{item.ctim|dataformat(‘’)}}<td>
这里虽然没有传格式，但是传了参数，一个空字符串。如果不传参数，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=””)也可以成功。
演示效果：
