【filter】Vue.jsのfilterで金額にカンマを入れる【フォーマット】

f:id:duo-taro100:20160218004611p:plain

ここではVue.jsを使って金額にカンマを入れるフォーマット処理について解説していきたいと思います。

最初に、金額にカンマを入れる方法を確認しておきましょう。
以下のようにすればOKです。

// 金額
var money = 20000;

// toLocaleString()を使ってカンマ区切りにする
// 20,000となる
var commaMoney = money.toLocaleString();

金額にカンマを入れるためにはtoLocaleString()を使います。

toLocaleString() でカンマ区切りにする

続いて、上記の実装をVue.jsに組み込む方法をご紹介します。

Vue.jsにはデフォルトでフォーマット処理をしてくれる実装はありません。なので自分で作成する必要があります。
Vue.jsでフォーマット処理を実装する場合は、filterというものを使います。

公式ドキュメントにも記載がありますが、filterの実装方法は2つあります。

・グローバルfilterに定義する方法
・ローカルfilterに定義する方法

金額にカンマを入れる実装を、addCommaという名前のfilterで作成してみましょう。

グローバルfilterの定義には、Vue.filter()を使います。
様々な画面で使うフィルタの場合はこちらを使いましょう。

Vue.filter(フィルタ名, function(val){
//処理
});

金額にカンマを入れるfilterは以下のようになります。

/**
 * 金額をカンマ区切りに表示します。
 * @param val 金額
 */
Vue.filter('addComma', function(val)){
	return val.toLocaleString();
});

続いてローカルfilterで定義する方法ですが、以下のようにします。
特定のコンポーネント内でしか使用しない場合はこちらを使います。

filters: {
フィルタ名: function (value) {
// 処理
}
}

金額にカンマを入れるfilterは以下のようになります。

filters: {
  addComma: function (value) {
    return val.toLocaleString();
  }
}

続いてfilterの使用方法を確認します。

例えばあるコンポーネントが以下のデータを保持していたとします。

data : function(){
	return {
	    money : 20000
	}
}

テンプレートでこのデータを以下のように表示することを考えましょう。

<!-- filterなし -->
<template>
    <p>{{money}}円</p>
</template>

このままであれば、画面には「20000円」と表示されます。
では作成したfilterを使ってみましょう。
filterは使用したいデータにパイプ記号を挟んで記述します。
テンプレートでこのデータを以下のように表示することを考えましょう。

<!-- filterあり -->
<template>
    <p>{{money | addComma}}円</p>
</template>

こうすれば、画面上では「20,000円」と表示されます。

以上です。
他にも日付形式にフォーマットしたり、大文字小文字の変換などもfilterで実装可能です。
是非試してみてください。

Techvenience