Vue之在methods中使用filter的方法

60次阅读

共计 762 个字符，预计需要花费 2 分钟才能阅读完成。

相干材料：

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

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

根本应用

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

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

过滤器能够串联：

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

过滤器是 JavaScript 函数，因而能够接管参数：

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

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

正文完