WebDesigner's Memorandumウェブデザイナーの備忘録

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

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のフィルタと組み合わせる

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

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

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

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

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね