Vue 注册全局Filter

最新版的Vue2.0，取消了所有Filter，只能自己动手来写Filter,下面介绍下怎样注册全局Filter.

1. 创建filter.js，这里是一个格式化时间的Filter。

export  const normalTime=(time)=>{
  if(time){
    var odate = new Date();
    odate.setTime(time);
    var year = odate.getFullYear();
    var month = odate.getMonth()+1;
    var day = odate.getDate();
    var hours = odate.getHours();
    var minutes = odate.getMinutes();
    var seconds = odate.getSeconds();
    return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
  }
}

filter.js暴露出所有的过滤器: index.js中

import {normalTime} from './formatTime'    

export default {        
  normalTime
}

2.在main.js中引入filter.js

import filters from './filters'

Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));

至此就可以在*.vue中使用filter：

<span>时间: {{articleList.time| normalTime}}</span> 

总结：

注册全局filter的方法：（接收2个参数：1.过滤器名，2.过滤器函数）

Vue.filter('filterName', val=>{
    ...
    return newVal
})

• filter.js暴露出所有的过滤器:

export default{
   filter:fn1,
   filter:fn2,
   ...
}

Object.keys方法：

Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

循环绑定到Vue.filter上：

Object.keys(fifters).forEach(key => {
  Vue.filter(key, fifters[key])
})

参考链接：Vue.filter与Object.keys()