如何在Vuejs组件中应用过滤器？

本文介绍了如何在Vuejs组件中应用过滤器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如果我有一个简单的过滤器，请说：

If I have a simple filter, say:

Vue.filter('foo', function (value) { return value.replace(/foo/g, 'bar'); });

一个简单的组件：

Vueponent('example', { props: { msg: String, }, });

在标记内：

<example inline-template :msg="My foo is full of foo drinks!"> {{ msg }} </example>

我可以简单地应用过滤器：

I can simply apply the filter as such:

<example inline-template :msg="My foo is full of foo drinks!"> {{ msg | foo }} </example>

我可以在模板中轻松应用过滤器，但我想将该逻辑移回组件。

I can easily apply a filter within the template, however I want to move that logic back into the component.

它不是需要成为过滤器，但基本上是一种为数据字段创建getter和setter的方法。

It doesn't need to be a filter, but basically a way to create a getter and setter for data fields.

类似于：

Vueponent('example', { props: { msg: { type: String, getValue: function(value) { return value.replace(/foo/g, 'bar'); }, } }, });

推荐答案

它有点隐藏，我不确定是否它已记录在案，但有关于如何在组件中使用过滤器的 Github问题。

It is slightly hidden and I'm not sure if it is documented, but there is a Github issue on how to use filters in components.

要使用getter和setter，计算属性是完美的：

To use getters and setters, computed properties are perfect:

Vueponent('example', { props: { msg: { type: String, } }, computed: { useMsg: { get: function() { return this.$options.filters.foo(this.msg); }, set: function(val) { // Do something with the val here... this.msg = val; }, }, } });

以及相应的加价：

<example inline-template :msg="My foo is full of foo drinks!"> {{ useMsg }} </example>