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

Question

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

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

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

输出和数据文本一样，没有反转，你们能解释一下它是如何工作的吗，我对计算过滤器有点困惑

Answer 1

你必须直接使用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>

在您的代码中，您编写了 computed 方法，而不是 filter。

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

这里是一个过滤器的例子。

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>

Answer 2

计算值是它自己的 "variable"。

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

计算属性 "watch" 以更改其值，并在这些值更新时进行更新。因此，您可以将计算属性视为 "dynamic properties"，它们会在必要时更改，并相应地更新 dom。

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

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

How to use computed function to filter?

javascript

vue.js

vuejs2

vue-filter