Vue

【Vue.js 2.9】はじめてのVue.js フィルターの使い方

  /

・Vue.jsのフィルター(filters）の書き方
・ローカル、グローバル、連結、引数の紹介

はじめに

今回はVue.jsのフィルター（filters）の書き方となります。
フィルターにはローカル、グローバルがあります。他にはフィルターの連結や引数を用いたフィルターの書き方の紹介です。

【Vue.js 2.9】はじめてのVue.js プロジェクト作成からWelcomeページの表示 ・はじめてVue.jsを使う場合のやり方・Welcomeページを表示するまで紹介 はじめに Vue.jsの学習がここから始...

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

フィルターとは

Vue.js公式では、フィルターはテキストフォーマットとしてフィルターを使います。
例えば、数値のカンマ区切りとかですね。

https://jp.vuejs.org/v2/guide/filters.html

ローカルフィルター

極々一般的なフィルターの書き方です。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p>
    フィルター無し：{{ price }}
  </p>
  <p>
    フィルター有り： {{ price | setComma }}
  </p>
</div>
new Vue({
	el: '#app',
	data:{
		price: 1000,
	},
	filters:{
		setComma: function(value){
			return value.toLocaleString()
		}
	}
})

サンプルとして「price」変数の値にカンマを追加した状態で表示させています。
HTML側の7行目の箇所がフィルター部分です。
Vue.js側は6行目以降です。

フィルターを定義するには「filters」であり、その中にfunctionを設定しています。
functionには引数が必要でありその引数がHTML側のパイプ(|)の前の変数が認識されます。
今回ですとHTML側の7行目の「price」が、引数valueとして認識されます。

ローカルフィルターとはローカルとある通りVueが適用される範囲で使うフィルターを指しています。
この場合、id=’app’があるDIVタグ内でのみフィルターが使えます。

グローバルフィルター

グローバルフィルターはローカルフィルターとは違い全体で使えるフィルターを指します。
フィルターの定義位置が違うだけであり書き方はローカルフィルターとほぼ一緒です。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p>
    フィルター無し：{{ price }}
  </p>
  <p>
    フィルター有り： {{ price | setComma }}
  </p>
</div>
Vue.filter('setComma', function (value) {
  return value.toLocaleString()
})
new Vue({
	el: '#app',
	data:{
		price: 1000,
	},

})

変更箇所はVue.js側のみです。
グローバルフィルターはローカル側より前に定義する必要あるため、1行目から3行目にfilterを追加しています。
functionの中はローカルフィルターと同じ書き方です。

フィルターの連結

フィルターの呼び出しは複数出来ます。これを連結と呼びます。
上記のカンマ区切りの前に消費税8%表記をしたい場合は下記となります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p>
    フィルター無し：{{ price }}
  </p>
  <p>
    フィルター有り： {{ price | setTax | setComma }}
  </p>
</div>
new Vue({
	el: '#app',
	data:{
		price: 1000,
	},
	filters:{
		setComma: function(value){
			return value.toLocaleString()
		},
		setTax: function(value){
			return value * 1.08
		}
	}
})

連結したフィルターの呼び出しはパイプとフィルター名を繰り返せば呼べます。
Vue.js側はフィルターの定義を同じ感じで設定します。

連結の注意点としては、左から順番に処理されます。
今回は税込み表記のあとにカンマ区切りを行いたいのでその順番にしています。
カンマ区切りは文字列型が返却されるため、カンマ区切りの後に税込み表記は出来ない問題もあります。

フィルター内に引数を使う場合

フィルターの中で引数を使うことも出来ます。
サンプルとして、任意の文字数までのみを表示する方法を引数を使って紹介します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p>
   全文字：{{ message }}
  </p>
  <p>
    3文字目まで表示： {{ message | textSplice(3) }}
  </p>
  <p>
    7文字目まで表示： {{ message | textSplice(7) }}
  </p>
</div>
new Vue({
	el: '#app',
	data:{
		message: '1234567890',
	},
	filters:{
		textSplice: function(value, length){
			return value.substring(0, length)
		}
	}
})

HTML側の7行目、10行目のフィルター連結で引数ありのメソッドを呼んでいます。
Vue.js側の7行目から9行目でメソッドを定義しています。

フィルターのメソッドの第1引数はフィルター対象の変数で決まっているため第2引数以降が任意の処理で利用出来ます。

RELATED POST