Vue过滤器调用外部方法

一、全局过滤器

1.定义外部方法

比如在utils/timeFormat.js下定义一个方法

image.png

2.main.js中导出

import{formatTime} from './utils/timeFormat.js'
Vue.filter('formatTime',formatTime)

若有多个方法

import vueFilter from './js/filter'
for (let key in vueFilter){
Vue.filter(key,vueFilter[key])
}

3.页面使用

<div>{{beginTime | formatTime(beginTime)}}</div>

4.测试

beginTime为：2020-06-24
显示结果为：6月下旬

二、局部过滤器
在钩子函数filters中定义，只能在当前 vue 对象中使用
比如：

1.定义局部过滤器

 filters: {
         dataFormat(msg) {
              return msg+'--测试';
           }
       }

2.页面使用

<div>{{title | dataFormat(title)}}</div>

3.测试

title为："今天是20200624"
显示结果为："今天是20200624--测试"