VueJS 双向过滤器 [英] VueJS two way filter

问题描述

是否可以在 VueJS 中使用双向过滤器?

Is it possible to use a two way filter in VueJS?

我试过了，但在新文档中找不到.

I tried, but could not find it on the new docs.

我试过了

<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>

但它不起作用.

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

for example if I test the simple filter

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

它有效.

推荐答案

双向过滤器已在 Vue.js 2 中被替换(粗体是我的):

Two-Way filters have been replaced in Vue.js 2 (bold is mine):

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

Some users have enjoyed using two-way filters with v-model to create interesting inputs with very little code. While seemingly simple however, two-way filters can also hide a great deal of complexity - and even encourage poor UX by delaying state updates. Instead, components wrapping an input are recommended as a more explicit and feature-rich way of creating custom inputs.

有关新最佳实践的分步指南，请按照 双向过滤器迁移指南.

For a step-by-step guide to the new best practice, follow the Two-Way filters migration guide.

这篇关于VueJS 双向过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！