Vue之在methods中使用filter的方法

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 }}

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

过滤器可以串联：

<div>
    {{ message | filterA | filterB }}
</div>

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

<div>
{{ message | filterA('arg1', arg2) }}
</div>

在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
    }
}