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

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>