·局部过滤器只能在当前Vue实例中使用。

    局部过滤器 - 图1

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <!—

    {{ content | filterA }}

    {{ content2 | filterA }}

    —>     <p>{{ content | filterA | filterB }}</p> <p>{{ content | filterA | filterC(‘lagou-‘) }}</p> </div> <!—

    {{ content | filterA }}
    —> <script src=“lib/vue.js”></script> <script> new Vue({ el: ‘#app’, data: { content: ‘a-b-c’, content2: ‘x-y-z’ }, filters: { filterA: function (value) { return value.split(‘-‘).join(‘’); }, filterB: function (value) { return value.split(‘’).reverse().join(‘’); }, filterC (value, prefix) { return prefix + value; } } }); /* new Vue({ el: ‘#app2’, data: { content: ‘q-w-e’ } }) */ </script> </body> </html> <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <p>{{ content | filterA }}</p> </div> <script src=“lib/vue.js”></script> <script> // 全局过滤器 filterA 设置翻转字符串功能 Vue.filter(‘filterA’, function (value) { return value.split(‘’).reverse().join(‘’); }); new Vue({ el: ‘#app’, data: { content: ‘a-b-c-d-e-f’ }, // 局部过滤器 filterA 设置去除 - 的功能，局部名字与全局名字同名，局部会覆盖全局 filters: { filterA (value) { return value.split(‘-‘).join(‘’); } } }); </script> </body> </html>