Filters(フィルタ)でデータを加工[グローバルフィルタ][Vue.js]

2019年5月14日

Filters(フィルタ)を利用すると、データの加工をおこない表示させることができます。主に数字のカンマ区切りや、テキストデータに対して利用されます。

 

小文字で入力した英語を、大文字に変換するフィルタです。

filtersオプションにおいて、uppercaseという適当に付けた名前のプロパティ(いわゆるフィルタ名)を用意し、大文字に変換するための関数を記述しています。このuppercaseを、変換したいデータ(msg)に{{ msg | uppercase }}のように記述します。

 

 

フィルタは連続して設定することができます。下記では、更に文字列を反転するフィルタを設定しています。

 

 

 

グローバルフィルタ


 

上述したコードは、ローカルフィルタであり特定のコンポーネント内でしか利用できませんが、グローバルフィルタとして登録すると、すべてのコンポーネント内にて利用できるようになります。

 

下記はVue ClI によって作成したプロジェクトにグローバルフィルタを設定した例です。Vue ClI については下記ページをご参照下さい。

 

Vue CLI 3 ではじめるVue RouterとVuex入門

 

main.js

8〜10行目

小文字で入力した英語を大文字に変換するフィルタを、グローバルフィルタとして登録しています。

 

About.vue

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー