A collection of useful custom filters for Vue.js(v2.x.x) apps.
A collection of useful custom filters for Vue.js(v2.x.x) apps.
This demo uses Bootstrap.css for styling. But you should know that no stylesheets are needed for using these filters in your webapps.
For now, vue-filters-kit contains 4 custom filters.
Install via npm:
npm install vue-filters-kit --save
Register these filters in your Vue.js app:
const App = new Vue({ el: '#app', // register filters filters: { booleanFormat: require('vue-filters-kit/filters/booleanFormatter'), percentageFormat: require('vue-filters-kit/filters/percentageFormatter'), byteFormat: require('vue-filters-kit/filters/byteFormatter'), timestampFormat: require('vue-filters-kit/filters/timestampFormatter') } });
{{ rawValue | booleanFormat([trueText], [falseText]) }}
[trueText]is the text that will show if rawValue equals to true.
[falseText]is the text that will show if rawValue equals to false.
For example:
{{ isActive | booleanFormat('Yes', 'No') }}
If
isActiveequals to true, the rendered html will be:
Yes
Else if
isActiveequals to false, the result will will be:
No
By default,
[trueText]is 'Yes' and
[falseText]is 'No'.
{{ rawValue | byteFormat }}
rawValueis a number whose unit is byte.
For example:
{{ size | byteFormat }}
If
sizeequals to 1000000, the rendered html will be:
976.56 K
{{ rawValue | percentageFormat([digit]) }}
[digit]is the number of digits to keep after decimal.
For example:
{{ ratio | percentageFormat(4) }} {{ ratio | percentageFormat(2) }}
If
ratioequals to 0.15666666, the rendered html will be:
15.6667% 15.67%
By default,
[digit]is 2.
Timestamp Formatter depends on Moment.js. Make sure you have installed Moment.js via NPM.
{{ rawValue | timestampFormat([format]) }}
rawValueis a timestamp in milliseconds.
[format]is the format of the output time string.
For example:
{{ startTime | timestampFormat('YYYY/MM/DD') }}
If
startTimeequals to 1456989887000, the rendered html will be:
2016/03/03
By default,
[format]is 'YYYY-MM-DD HH:mm:ss'. You can see more about
[format]in Moment.js Documentation.
MIT