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>

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31