Vue.jsで便利なカスタムフィルターのサンプル一覧まとめ

Vue.jsのフィルターとは

Vue.jsのフィルターとはテキストフォーマットなどを適用するためもの。

例えば{{ str }}がabcと表示される箇所に{{ str | capitalize }}のような記述でフィルターを記述するとAbcで値が返されるようになる。

Vue.js 2.xではフィルターはすべて自分で作成する必要がある。

Vue.js 1.x のデフォルトのフィルター

Vue.js 1.x以下だと10個のデフォルトのフィルターが存在するが2.x以降では削除されているため、これらは自分で作成する必要がある。

  • capitalize
  • uppercase
  • lowercase
  • currency
  • pluralize
  • json
  • key
  • debounce
  • filterBy
  • orderBy

以降にVue.jsでよく使用されるカスタムフィルターのサンプルを掲載した。

必要なものを取り入れたり、フィルター作りの参考用(babelとpolyfillが必要)。

2.x以降ではfilterByやorderByなどはcomputedを使うべきなので未作成。

capitalize

英字の先頭を大文字にする。

{{ str | capitalize }}
abc => Abc

uppercase

英字をすべて大文字にする。

{{ str | uppercase }}
abc => ABC

lowercase

英字をすべて小文字にする。

{{ str | lowercase }}
ABC => abc

comma

数字をカンマ区切り。

{{ num | comma }}
1234567 => 1,234,567

yen

円記号を付ける。

{{ num | yen }}
1000000 => ¥1000000

currency

円記号とカンマを付ける。

フィルターは複数付けることもできるので{{ num | yen | comma }}とすれば同じ結果になる。

{{ num | currency }}
1000000 => ¥1,000,000

{{ num | yen | comma }}
1000000 => ¥1,000,000

pluralize

引数の文字列を付ける。1つのときは前、2つ以上のときは後に付ける。

引数の個数を超えると最後の値を付ける。

{{ item | pluralize('st', 'nd', 'rd', 'th') }}
[1, 2, 3, 4, 5] => 1st 2nd 3rd 4th 5th

json

jsonを文字列に変換。

{{ member | json }}
=> { "id": 1, "name": "foo" }

max

配列の最大値を返す。

引数で2番目以降の最大値も指定できる。

{{ arr | max }}
[1, 3, 5, 2, 4] => 5

{{ arr | max(2) }}
[1, 3, 5, 2, 4] => [5, 4]

min

配列の最小値を返す。

引数で2番目以降の最小値も指定できる。

{{ arr | min }}
[1, 3, 5, 2, 4] => 1

{{ arr | min(2) }}
[1, 3, 5, 2, 4] => [1,2]

length

lengthを返す。

{{ arr | length }}
['foo', 'bar', 'baz'] => 3

rand

配列内のどれかをランダムで返す。

引数で返す個数を指定できる。

{{ arr | rand }}
['A', 'B', 'C', 'D'] => C

{{ arr | rand(3) }}
['A', 'B', 'C', 'D'] => [ "B", "D", "A" ]

first

配列の最初の値を返す。

{{ arr | first }}
['foo', 'bar', 'baz'] => foo

last

配列の最後の値を返す。

{{ arr | last }}
['foo', 'bar', 'baz'] => baz

reverse

文字列を逆にする。

{{ str | reverse }}
'abc' => cba

truncate

指定した引数の文字数を超える文字列を省略。

{{ str | truncate(5) }}
'1234567890' => 12345...
{{ str | truncate(5, '〜') }}
'1234567890' => 12345〜

trunc

小数点切り捨て。

引数で小数点第何位で切り捨てるか指定できる。

{{ num | trunc }}
3.14159 => 3
{{ num | trunc(2) }}
3.14159 => 3.14

toFixed

数を固定小数点表記を用いて近似値で返す。

引数で小数点第何位か指定できる。

{{ num | toFixed }}
123.456 => 123
{{ num | toFixed(2) }}
123.456 => 123.46

kana

全角カナまたは半角カナに変換して返す。

引数がないと半角カナ=>全角カナ。引数が1だと全角カナ=>半角カナ。

{{ str | kana }}
'ハローワールド' => ハローワールド
{{ str | kana(1) }}
'ハローワールド' => ハローワールド

repeat

引数の回数分文字列を繰り返す。

{{ str | repeat(3) }}
'abc' => abcabcabc

trim

文字列の両端の空白を削除。

{{ str | trim }}
' abc ' => 'abc'

replace

文字列をすべて置換。

{{ str | replace('b', 'x') }}
'abcba' => 'axcxa'

youbi

日付に曜日を付ける。

{{ date | youbi }}
2018年12月4日 => 2018年12月4日 (火)

{{ date | youbi('曜') }}
2018/12/4 => 2018/12/4 火曜

gengou

西暦を元号付きの和暦に置換。

{{ year | gengou }}
1986 => 昭和61

pluck

指定したキーの値を返す。

{{ users | pluck('name') }}
[ "sato", "suzuki", "yamada" ]

補足: Vue.jsは直接メソッドが使用可能

Vue.jsは直接メソッドが使用できるので以下のような書き方ができる。

arr: ['foo', 'bar', 'baz'] でjoin()使用の場合
{{ arr.join('-') }} => 結果はfoo-bar-baz

前述のtoFixedなどはフィルタにしなくても直接記述することが可能。