在vue-cli中引用公共過濾器filter

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

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

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

let formatDate = time => { if(time){ return time.slice(5,16) } } export { formatDate }

3.找到main.js引入babel

import * as filters from './assets/js/filters.js' Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })

4.在組件中使用es5

<h2>時間:<span>{{createTime | formatDate(createTime)}}</span></h2>
相關文章
相關標籤/搜索