More than 1 year has passed since last update.

環境

  • node.js 7.7.1
  • npm 4.4.2
  • Vue.js 2.2.2

Vue.filter

定義する

Vue.filter('my-filter', function (value) {
  // 処理された値を返す
})

フィルタをグローバルに定義します。
当然、関連のないコンポーネントからもこのフィルターを呼び出すことが可能です。

フィルターを使う

mustache

{{ message | capitalize }}

引数を渡す場合
js
{{ message | truncate(17) }}

v-bind

<div v-bind:id="rawId | formatId"></div>

scriptからグローバルなフィルタを呼び出す

Vue.filterは定義とゲッターを兼ねています。

// getter、登録されていればフィルタを返す
Vue.filter('my-filter')

これを利用しコンポーネントのscriptから、定義済みのフィルターを呼び出すことができました。

const myFilter = Vue.filter('my-filter')
myFilter(this.message)

定義されていなかいフィルタの場合、実行時にエラーになるはず(未確認)

もっと複雑なことできなかったっけ?

Vuejs 1.x系と異なり、2.x系はフィルターを直接利用できるシーンが上記の2つに制限されるようになりました。

複雑なことをする場合は算出プロパティを使います。

算出プロパティ

new Vue({
  filters: {
    hogeFilter: function (value) {
      // 美しい処理
    }
  }
<div v-for="hoge in hogeFilter">

ドキュメント・リンク

https://jp.vuejs.org/v2/api/#Vue-filter
https://jp.vuejs.org/v2/guide/syntax.html#フィルタ

なお、次の記事が詳しいようで、勉強させていただきました。
http://qiita.com/yutaro23/items/095cf66038bb9fabc094

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.