最新版的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])
})