Vue之在methods中使用filter的方法

在Vue.js中，过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。从Vue.js2.0.0版本开始，内置的过滤器被删除了，如果使用过滤器，需要自己编写。过滤器可以用在两个地方：双花括号插值和v-bind表达式，使用时通过 管道符（ | ） 添加到表达式的尾部使用。

在双花括号中：{{ message | capitalize }}

在 v-bind中：

过滤器本质是一个函数。

Vue中的过滤器分为两种：局部过滤器和全局过滤器

Vue之在methods中使用filter的方法

全局定义filter
在main.js或者其他定义全局filter

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

new Vue({
  // ...
})

那当然，也可以在当前组件中定义filter，这是针对当前组件使用的。

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

在html使用filter
基本使用

{{ message | capitalize }}

过滤器可以串联：

    {{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

在methods使用filter

methods: {
    func: (){
        const value = 'john';
        // let f1 = Vue.filters['filterName'] (value);
        let f2 = this.$options.filters['capitalize'](value);  // 直接调用全局的filters
        console.log(f2); // John
    }
}