Vue.js Custom Filters Basic
Example
Custom filters in Vue.js can be created easily in a single function call to Vue.filter.
//JS
Vue.filter('reverse', function(value) {
return value.split('').reverse().join('');
});
//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'
It is good practice to store all custom filters in separate files e.g. under ./filters as it is then easy to re-use your code in your next application.
If you go this way you have to replace JS part:
//JS
Vue.filter('reverse', require('./filters/reverse'));
You can also define your own begin and end wrappers as well.
//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'
