在vue中引用公共過濾器filter

在實際項目開發中,在某一組件中聲明的全局過濾器Vue.filter並不能在其他組件中使用,所以,我認爲只要調用兩次以上或者可能會被調用兩次以上的過濾器,就應該寫入統一個過濾器文件中,方便統一調用。下面是如果創建並調用統一的過濾器的方法:

1.在公用js文件夾中新建文件filters.js

2.在filters.js中使用es6寫法寫入(因爲我用的是vue-cli,自帶babel組件一套,可以自動轉換es6寫法到es5,所以不用考慮兼容性)

[javascript] view plain copy
  1. let formatDate = time => {  
  2.     if(time){  
  3.         return time.slice(5,16)  
  4.     }  
  5. }  
  6. export { formatDate }  
3.找到main.js引入

[javascript] view plain copy
  1. import * as filters from './assets/js/filters.js'  
  2.   
  3. Object.keys(filters).forEach(key => {  
  4.     Vue.filter(key, filters[key])  
  5. })  
4.在組件中使用
[javascript] view plain copy
  1. <h2>時間:<span>{{createTime | formatDate(createTime)}}</span></h2>  
我這個是製作了一個時間截取的過濾器,比較簡陋,真正厲害的應該是輸入格式自動返回對應時間,但是我這暫時沒必要這麼做,根據項目需求自定義即可。

其實這種簡單的截取字符串直接在標籤上寫入也可以,這只是舉個例子

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章