过滤器-定义格式化时间的全局过滤器
目录
一、全局过滤器的应用演示
二、范例
一、全局过滤器的应用演示
在实例之前通过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=””)也可以成功。
演示效果：
