Question

是否可以在VueJS中使用双向滤波器？

我试过，但在新文档中找不到它。

我试过

<script>
    var app = new Vue({
        el: '#app',
        data: {
            EditMode: false,
            message: 'Hello Vue!'
        },
        filters: {
            capitalize: function (value) {
                if (!value) return '';
                value = value.toString();
                return value.toUpperCase();
            },
            ccc:
                {
                    read: function (value) {
                        return value.toUpperCase() + "re";
                    },
                    write: function (value) {
                        return value.toLowerCase() + "wri";
                    }
                }
        }
    }
    );
</script>

和

<h1>{{ message | ccc }}</h1>

但它不起作用。

例如，如果我测试简单过滤器

<h1>{{ message | capitalize }}</h1>

它有效。

Answer 1

双向过滤器已在Vue.js 2中取代（粗体是我的）：

有些用户喜欢使用v-model的双向过滤器，用很少的代码创建有趣的输入。虽然看似简单，但双向过滤器还可以隐藏大量复杂性 - 甚至通过延迟状态更新来鼓励糟糕的用户体验。相反，建议包装输入的组件作为创建自定义输入的更明确且功能丰富的方式。

有关新最佳做法的分步指南，请按照Two-Way filters migration guide进行操作。

Answer 2

您不能使用对象方法并在过滤器中使用getter和setter（您在概念中尝试使用read（getter）和write（setter））。您应该只使用返回所需结果的函数。

如果你想使用getter和setter，那么你必须使用computed选项，你需要使用get和set方法而不是读写。

VueJS双向滤波器

2 个答案: