Vueのフィルターのコレクション、vue-filterが便利でした

filter使ってますか?
関数でも実現できるので使わなくても支障はないのですが、使ってみるとかなり便利で、コードもスッキリしたので是非使ってみてください。

フィルター — Vue.js
Vue.js - The Progressive JavaScript Framework

フィルターは以下の書籍で知りました。公式ドキュメントにももちろん書いてあるのですが、ドキュメントよりサクサク読めれるのでおすすめです。

フィルターの使い方

3をフィルターを使い03と出力します。

{{ 3 | zeroPadding(2) }}
Vue.filter('zeroPadding', function(val,num){
    return ('00000000000000' + val).slice(num)
});

グローバルでフィルターを定義することで、どのコンポーネントからでも使えるようになります。

vue-filterとは

フィルターのセットです。

wy-ei/vue-filter
vue-filter - :v: A collection of Vue.js filter.

個人的にはsizeやtoArrayを結構使ってます。
その他も便利なものがたくさんありますね。

{{ {"one":1,"two":2,"three":3} | size }} => 3
{{ {"0":1,"1":2,"2":3,"3":4} | toArray }} => [1,2,3,4]

コメント