vue.js カスタムフィルタ登録 お金の表示を3桁区切りで表示する

お金の表示を3桁区切りにしたい

JSの標準関数で存在した。

NumberオブジェクトのtoLocaleString関数

こんな感じ

console.log( (123456).toLocaleString() );

// 123,456

 ロケール設定に依存するようですが、

正規表現でコネコネするよりシンプルで良い

vue.js のカスタムフィルタで表示する際に桁区切り

今回、vue.jsを利用したSPAで

桁区切りした数字を画面に表示するためにカスタムフィルタに

登録する方法をとった。

JSの処理中にカンマをもたせたり変数にいれたりすると

演算の際に邪魔になるため。

表示としては

 JS

　var money = 123456;

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

HTML

　<p>{{money | moneyDelemiter}}</p>

これで 123,456 と期待通りに表示される。

手軽でよい。