<commit_before>title: Custom Filters
type: guide
order: 10
---

## The Basics

Similar to custom directives, you can register a custom filter with the global `Vue.filter()` method, passing in a **filterID** and a **filter function**. The filter function takes a value as the argument and returns the transformed value:

``` js
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})
```

``` html
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
```

The filter function also receives any inline arguments:

``` js
Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})
```

``` html
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap before after"></span>
```

## Two-way Filters

Up till now we have used filters to transform values coming from the model and before displaying them in the view. But it is also possible to define a filter that transforms the value before it is written back to the model from the view (input elements):

``` js
Vue.filter('check-email', {
  // read is optional in this case, it's here
  // just for demo purposes.
  read: function (val) {
    return val
  },
  // this will be invoked before writing to
  // the model.
  write: function (val, oldVal) {
    return isEmail(val) ? val : oldVal
  }
})
```

## Filter Context

When a filter is invoked, its `this` context is set to the Vue instance that is invoking it. This allows it to output dynamic results based on the state of the owner Vue instance.

For example:

``` js
Vue.filter('concat', function (value, key) {
  // `this` points to the Vue instance invoking the filter
  return value + this[key]
})
```
``` html
<input v-model="userInput">
<span>{{msg | concat userInput}}</span>
```

For this simple example above, you can achieve the same result with just an expression, but for more complicated procedures that need more than one statements, you need to put them either in a computed property or a custom filter.

The built-in `filterBy` and `orderBy` filters are both filters that perform non-trivial work on the Array being passed in and relies on the current state of the owner Vue instance.

Alright! Now it's time to learn how the [Component System](/guide/components.html) works.<commit_msg>traslate custom filter section in guide<commit_after>title: カスタムフィルタ
type: guide
order: 10
---

## 基本

カスタムディレクティブと同様に、グローバルな `Vue.filter()` を使用してカスタマイズしたフィルタを登録することができます。引数には **filterID** と **filter function** を渡します。このフィルタの関数は引数として値を受け取って、変換した値を返します:

``` js
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})
```

``` html
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
```

フィルタ関数はインラインの引数を受け取ることもできます:

``` js
Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})
```

``` html
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap before after"></span>
```

## 双方向フィルタ

これまでフィルタはモデルから渡される値をビューに表示される前に変換するために使用していました。しかし、インプット要素などのビューからモデルに書き込みがされる前に値を変換するフィルタの定義も可能です。

``` js
Vue.filter('check-email', {
  // read は任意のもので、
  // ここではデモ用に記載します
  read: function (val) {
    return val
  },
  // モデルへの書き出しが行われる前に
  // 呼び出されます
  write: function (val, oldVal) {
    return isEmail(val) ? val : oldVal
  }
})
```

## フィルタコンテキスト

フィルタが呼び出される時、`this` のコンテキストにはそれを呼び出している Vue インスタンスがセットされます。これによって、その所有者である Vue インスタンスの状態に応じて動的な結果を出力することが可能になります。

例:

``` js
Vue.filter('concat', function (value, key) {
  // `this` はフィルタを呼び出す Vue インスタンスを指します
  return value + this[key]
})
```
``` html
<input v-model="userInput">
<span>{{msg | concat userInput}}</span>
```

上記の簡単な例では、 expression をそのまま記述した時と同じ結果が得られます。しかし、複数のステートメントが必要な複雑な処理においては、Computed Property もしくは カスタムフィルタが必要になります。

ビルトインの `filterBy` と `orderBy` フィルタは共に渡された配列に対して重要な変更を行うものであり、所有者である Vue インスタンスの現在の状態に依存するものです。

以上！これで次は [Component System](/guide/components.html) がどのように動作するか学ぶ時間です。
{'fraction_non_alphanumeric': 0.13204180474126945, 'fraction_numerical': 0.0010196278358399185, 'mean_word_length': 4.4804469273743015, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1980693', 'n_tokens_mistral': 1668, 'n_tokens_neox': 1548, 'n_words': 430}