在实际项目开发中,在某一组件中声明的全局过滤器Vue.filter并不能在其他组件中使用,所以,我认为只要调用两次以上或者可能会被调用两次以上的过滤器,就应该写入统一个过滤器文件中,方便统一调用。下面是如果创建并调用统一的过滤器的方法:
1.在公用js文件夹中新建文件filters.js
2.在filters.js中使用es6写法写入(因为我用的是vue-cli,自带babel组件一套,可以自动转换es6写法到es5,所以不用考虑兼容性)
let formatDate = time => { if(time){ return time.slice(5,16) } } export { formatDate }
3.找到main.js引入
import * as filters from './assets/js/filters.js' Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
4.在组件中使用
<h2>时间:<span>{{createTime | formatDate(createTime)}}</span></h2>