Formatting currencies with filters
Formatting currencies in Vue 1 was somewhat limited; we will be using the excellent accounting.js library to build a much more powerful filter.
Getting ready
The basics of filtering are explored in the Formatting your text with filters recipe; where you build a basic filter ensure that you complete that, then come back here.
How to do it...
Add accounting.js to your page. Refer to http://openexchangerates.github.io/accounting.js/ for more details on how to do it. If you are using JSFiddle though, you can just add it as an external resource to the left menu. You can add a link to CDN, which is serving it, for example, https://cdn.jsdelivr.net/accounting.js/0.3.2/accounting.js.
This filter will be extremely simple:
Vue.filter('currency', function (money) {
return accounting.formatMoney(money)
})You can try it out with a one-liner in HTML:
I have {{5 | currency}} in my pocketIt will default to dollars, and it will print I have $5.00 in my pocket.
