Vue.jsのフィルタを使ってみる

Vue.jsのfilterの設定について試してみます。

サンプルコード

Vue.jsのフィルタは表示テキストの大文字/小文字の切り替えなど、テキストデータをフォーマットする際に便利です。
今回は例として、金額を消費税込み(10%)に変更するフィルタを設定してみます。

まずJavaScriptですが、filtersのプロパティ内に関数の形式で設定します。
今回はtaxというフィルタ名で設定しました。

var app = new Vue({
	el: '#app',
	filters: {
		tax: function(value) {
			if (!value) return '';
			return value * 1.1;
		}
	}
})

次にHTMLですが、 {{ 値 | フィルタ名 }} の形で設定します。

<div id="app">
	<p>{{ 10000 | tax }}</p>
	<div v-bind:data-price="10000 | tax">属性値で使う場合</div>
</div>

これでフィルタが適用された状態で表示されました。
フィルタのデモページ