Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法

Vue.jsで変動する金額を表示させたいとき、表示される数字に3桁のカンマを入れたいものです。
ややこしいのかなと思っていたら、JavaScriptの標準関数が用意されていて、ものすごく簡単に実装できました。

toLocaleString()の使用

数字に対してtoLocaleString()関数を実行すると、それだけで3桁区切りでカンマが入るようになります。

このとき、数字から文字列に切り替わってしまうので、いろいろ処理して最終的にカンマを付けるイメージです。

// 金額
let num = 20000;
// toLocaleString()を使ってカンマ区切りにする
let price = num.toLocaleString();

// 「20,000」と表示される
console.log(price)

普通のJavaScriptでもこの方法で3桁区切りは実現できます。

Vue.jsのフィルタと組み合わせる場合は、下記のfilterを設定しておきます。

Vue.filter('priceLocaleString', function(value) {
　return value.toLocaleString();
});

あとは表示させたい場所にフィルタを設定したデータをセットすればOKです。

<p>{{price | moneyLocaleString}}</p>

これで3桁区切りのカンマが付きますし、priceの中身（数字）が変わってもそれに合わせて数値とカンマも切り替わってくれます。

もっと簡単に実装したい場合は、filterを使わなくても下記のように書けば普通にカンマ付きで表示してくれました。

<p>{{price.toLocaleString()}}</p>