Vue.js添加全局过滤器的几种方法

[广告:最高 ¥2000 红包]阿里云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

过滤器基础知识

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

组件内创建过滤器,是在filters对象中添加一个方法,如下capitalize方法:

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

但上面的capitalize方法只能在该组件中使用。如果想要在全局范围使用,需要定义在全局,如下:

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
// ...
})

最近做一个vue.js的小项目,发现不同的组件重复定义了相同的filter。从代码组织的角度来看,需要把这些filter归到一个文件,全局引入。当然我们不能把这些filters全部定义在main.js文件里,这里有几种方法。

1)

创建一个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中导入filters.js.

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

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

这种方式简单直接,但filters.js不是模块化的js文件。如果要把filters.js拿给其它项目用,还得把全局替换一下Vue.filter才行。

2)

你可以把filters.js写成一个标准通用的js模块化文件,如 filters.js:

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

通过Vue.mixin进行全局混入,如main.js

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

现在你便可以在所有template中使用自定义filter了。

混入 — Vue.js

混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。

请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

官方貌似不是很推荐,那可以选择插件或以下方式:

Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

参考资料:

码中人 微信公众号

关注微信公众号

码中人 微信公众号