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。

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

以下是过滤器的示例。

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

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

您只需在模板中将其引用为{{ reverseFiltered }}

即可

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

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

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

2 个答案: