如何使用计算函数进行过滤？

i have a doubt on a little project that i am developing, i don't want to use custom filters, i just want to use computed filters to output the reverse of a simple text that i defined in my data, at the moment i tried this:

我对我正在开发的一个小项目有疑问,我不想使用自定义过滤器,我只想使用计算过滤器输出我在数据中定义的简单文本的反向,此时我尝试过这个:

<p>{{someText | reverseFiltered}}</p>

<script>
    export default {
        data(){
            return {
                someText: "Apple"
            }
        },
        computed: {
            reverseFiltered(){
                return this.someText.split("").reverse().join("");
            }
        }
    }
</script>

the output is the same as the data text, no reverse, can you guys explain me how it works, i am a little confused with the computed filter

输出与数据文本相同,没有反转,你能解释一下它是如何工作的,我对计算过滤器有点困惑

2 个解决方案

#1

You have to use directly reverseFiltered, because you use computedMethod.

您必须直接使用reverseFiltered,因为您使用computedMethod。

<p>{{reverseFiltered}}</p>

var data = {
    message: 'Hello Vue.js!'
}

var demo = new Vue({
    el: '#demo',
    data(){
            return {
                someText: "Apple"
            }
        },
        computed: {
            reverseFiltered(){
                return this.someText.split("").reverse().join("");
            }
        }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <p>{{reverseFiltered}}</p>
</div>

In your code, you wrote a computed method, not a filter.

在您的代码中,您编写了一个计算方法,而不是一个过滤器。

A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value.

Vue.js过滤器本质上是一个函数,它接受一个值,处理它,然后返回处理过的值。

Here is an example of filter.

这是一个过滤器的例子。

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
});
var demo = new Vue({
    el: '#demo',
    data(){
            return {
                someText: "Apple"
            }
        },
        computed: {
            reverseFiltered(){
                return this.someText.split("").reverse().join("");
            }
        }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <p>{{someText | reverse}}</p>
</div>

#2

The computed value is a "variable" of it's own.

计算出的值是它自己的“变量”。

You can just reference it in your template as {{ reverseFiltered }}

您可以在模板中将其引用为{{reverseFiltered}}

De computed properties "watch" for changes on it's values, and updates when those values update. So you can see computed properties as "dynamic properties", they change when they have to, and update the dom accordingly.

De计算属性“监视”它的值的变化,并在这些值更新时进行更新。因此,您可以将计算属性视为“动态属性”,它们在必要时会更改,并相应地更新dom。

See also this documentation: https://vuejs.org/v2/guide/computed.html

另请参阅此文档:https://vuejs.org/v2/guide/computed.html

#1