目次
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) }}
'１２３４５６７８９０' => 12345...
{{ str | truncate(5, '〜') }}
'１２３４５６７８９０' => 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などはフィルタにしなくても直接記述することが可能。
