如何在Vue.js中添加一组全局过滤器？

我想在Vue.js应用程序中使用一些全局过滤器。我知道我需要在主Vue实例之前定义它们，但从代码组织的角度来看，将它们全部放在“main.js”文件中似乎并不合适。我怎么能把这些定义放在一个单独的文件中，导入到“main.js”中呢？我无法完全理解导入/导出的内容。

创建一个filters.js文件

import Vue from "vue"

Vue.filter("first4Chars", str => str.substring(0, 4))
Vue.filter("last4Chars", str => str.substring(str.length - 4))

将其导入main.js

import Vue from 'vue'
import App from './App'
import "./filters"

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

---

我认为最好的方法是使用VueJS的

插件

功能

创建一个

过滤器

文件夹，并将所有过滤器放在那里

- filters
  | - filter1.js
  | - index.js

在过滤器文件中，导出您需要的函数，在此示例中，我将使用大写过滤器：

export default function uppercase (input) {
    return input.toUpperCase();
}

在

index.js中

导入并创建插件：

import uppercase from './filter1';


export default {
     install(Vue) {
         Vue.filter('uppercase', uppercase);
     }
}

在你的main.js文件中使用它

import filters from './filters';
import Vue from 'vue';

Vue.use(filters);

我喜欢做的是

每个文件都有一个过滤器（es6模块）

向模块中的vue全局注册筛选器

还将过滤器功能导出为默认导出

例如，对于在数字中放置逗号分隔符的简单过滤器，我创建了NumberFilter.js和NumberFilter.test.js

NumberFilter.js

NumberFilter.test.js

此策略允许我将此过滤器作为标准es6模块和Vue模板在代码中使用

在现实世界中，我可能会在测试中模拟数字，并确保使用正确的数字格式调用.format的结果。

可以用于添加全局过滤器，过滤器可以在文件中设置，然后在main.js文件中导入过滤器文件

filters.js main.js

---

您可以在任何模板中使用过滤器。

就这么简单！谢谢。当我命名文件

filter.js

时，我不得不使用

import./filter

很好的答案，为了更好地阅读，我制作了一个名为

filter

的文件夹，并将过滤器写入一个文件

filter/index.js

中，而你无法导入

/filters

。这感觉比调用

Vue.filter（…）更简洁

在每个过滤器定义文件中，我很难将其与我的应用程序一起使用，并且意识到Vue在HTML模板中计算条件表达式的方式与Angular不同。正确的语法应该是

{value？$options.filters.uppercase（value，'params:'-'}}

VueJS官方文档警告不要过度使用全局混合，因为它们被注入到创建的每个Vue实例中。

import filters from './filters';
import Vue from 'vue';

Vue.use(filters);

import Vue from 'vue';
import numeral from 'numeral';

const NumberFilter = number => numeral(value).format('0,0');

Vue.filter('number', numberFilter);

export default numberFilter;

import NumberFilter from './NumberFilter';

describe('NumberFitler', () => {
   it('exists', () => {
      expect(NumberFilter).toBeDefined();
   });

   it('does its thing', () => {
       expect(NumberFilter(1234)).toEquals('1,234');   
   });
});

export default{
    firstWordCapitalize (value) => {
        if (!value)
            return ''
        value = value.toString()
        return value.charAt(0).toUpperCase();
    },
    anotherFilter(value) =>{
      return value+"-test";
    }
}

import Vue from 'vue';
import Filters from './filters';
Vue.mixin({
  filters: Filters
});