フィルター

フィルターは、二重中括弧補間と v-bind 式 (後者は 2.1.0 以降でサポートされています) の 2 つの場所で使用できます。フィルタは、「パイプ」記号で示される JavaScript 式の最後に追加する必要があります:

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

コンポーネントのオプションでローカル フィルタを定義できます:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

またはフィルタの作成時に定義できます。 Vue インスタンスの前にグローバルに:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
  // ...
})

グローバル フィルターとローカル フィルターの名前が同じ場合、ローカル フィルターが使用されます。

次の例では、capitalize フィルターを使用します。

フィルター関数は、常に式 (前の操作チェーン) の値を受け取ります。結果)を最初のパラメータとして使用します。上記の例では、capitalize フィルター関数は、最初のパラメーターとして message の値を受け取ります。

フィルターは連結できます:

{{ message | filterA | filterB }}

この例では、filterA は単一の引数、式 message を受け取るフィルター関数として定義されています。値はパラメータとして関数に渡されます。次に、フィルター関数 filterB の呼び出しを続けます。この関数も 1 つのパラメーターを受け取るように定義されており、filterA の結果を filterB に渡します。

フィルターは JavaScript 関数であるため、パラメーターを受け取ることができます。

{{ message | filterA('arg1', arg2) }}

ここでは、filterA は 3 つのパラメーターを受け取るフィルター関数として定義されています。このうち、message の値が最初のパラメータとして使用され、通常の文字列 'arg1' が 2 番目のパラメータとして使用され、式 arg2# の値が使用されます。 ## は 3 番目のパラメータとして使用されます。