基本
Vue.js
中的自定义过滤器可以通过对 Vue.filter
的单个函数调用轻松创建。
//JS
Vue.filter('reverse', function(value) {
return value.split('').reverse().join('');
});
//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'
最好将所有自定义过滤器存储在单独的文件中,例如在 ./filters
下,因为在下一个应用程序中可以轻松地重复使用你的代码。如果你这样做,你必须替换 JS 部分 :
//JS
Vue.filter('reverse', require('./filters/reverse'));
你也可以定义自己的 begin
和 end
包装。
//JS
Vue.filter('wrap', function(value, begin, end) {
return begin + value + end;
});
//HTML
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'