Vue之在methods中使用filter的方法

相干材料：

• 过滤器(Vue官网应用阐明)

全局定义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    }}