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

Vue.js

はじめに

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

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

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

フィルターとは

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

フィルターの使い方

基本的な流れ

  1. グローバル・ローカルのどちらかで定義する
  2. 適応させたい場面で呼び出す

登録方法

グローバル登録

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

グローバル登録では全体に効かせたいので、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

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

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

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

vue2-filters

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

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

  1. capitalize(先頭の単語を大文字に変換)
  2. uppercase(全ての英語を大文字に変換)
  3. lowercase(全ての英語を小文字に変換)
  4. placeholder
  5. truncate(文字数制限)
  6. currency(1000円毎にカンマ)
  7. pluralize(英単語を複数型に)
  8. ordinal(数字を序数に)
  9. limitBy(ループの回数制限)
  10. filterBy(対象ケーワードを含む場合のみ取得)
  11. find(対象のキーワードを含む最初の値を取得)
  12. orderBy(並び順変更)
vue2-filters
A collection of Vue.js filters

コメント

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping
タイトルとURLをコピーしました