Vue.jsのフィルターでデータを加工する

Vue.js

はじめに

こんにちは、てりー(@teriteriteriri)

Vue .jsでプログラムを書いていくと、「小文字は全て大文字に変換したい！！」や「金額を税込み表示にしたい！」などの様にテキスト系の変換処理を一律で行いたい場面に遭遇すると思います。

そんな時に活躍するのがフィルタ機能です。
今回はVue.jsのフィルタ機能について解説していきます。

フィルタとは「小文字は全て大文字に変換したい！！」や「金額を税込み表示にしたい！」などの様なテキスト系の変換処理に特化した機能です

グローバル登録とはプロジェクト全体に対して定義するやり方です。フィルターの役割を考えるとグローバル登録する場面も多くあると思います。

グローバル登録では全体に効かせたいので、main.jsに記載します。

// upperCaseというフィルターを登録
Vue.filter( "upperCase",function(value){

// toUpperCase()により、受け取ったvalueをお思いzにして返す処理を行う
 return value.toUpperCase();
});

ローカル登録では、定義したコンポーネント内のみにて呼び出し可能な登録になります。
各コンポーネントのスクリプト部分にて定義します。

<script>
export default{
　~~~
filters:{
　lowerCase(value){
 　　return value.tolowerCase
　}
},

適宜使いたい場所で呼び出します。
今回登録したフィルターは「小文字→大文字」の処理なので、以下の様にする事でが大文字に変換されます

// マスタッシュ{{ 要素　| フィルター名}}で呼び出し
<p>{{title | upperCase }}</p>

//v-bindでも
<div v-bind:id="要素 | フィルター名"></div>

<p>{{title | upperCase | lowerCase }}</p>

と定義する事で、複数のフィルターを連結させることも可能！！
その際、先に定義している方(今回だとupperCase)が優先的に適応される。

computedでもフィルターと同じ処理は可能です。

違いとしてフィルターはグローバル登録をする事で、コンポーネント毎にいちいち定義しなくて良い！という点が挙げられます。

またフィルターではthisが使えない点、methodsの様に依存関係に関わらず再描画する点などがcomputedとは異なります。

最近知ったvueのライブラリとして「vue2-filters」というものがあります。
以下のフィルターがすでに定義されていて利用できるという優れものです！！

汎用的なフィルターなので、うまく活用するとプロダクトのスピード感は上がると思います。

初めてweb開発の現場に入った時にVue.jsの勉強用に買った本を思い出に添付。