# フィルタ
removed
# 概要
フィルタは Vue 3.0 で削除され、サポートされません。
# 2.x での構文
2.x で開発者は共通のテキストフォーマットを適用するためにフィルタを使うことができました。
例:
<template>
<h1>Bank Account Balance</h1>
<p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
filters: {
currencyUSD(value) {
return '$' + value
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
これは便利に見える一方、括弧の中の式は"ただのJavaScript"になるという前提を崩すカスタム構文が必要であり、学習コストと実装コストの両方がかかります。
# 3.x での更新
3.x ではフィルタは削除され、サポートされません。代わりに、関数の呼び出しか算出プロパティに置き換えることを推奨します。
上記の例を用いて、実装する方法の一例です。
<template>
<h1>Bank Account Balance</h1>
<p>{{ accountInUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
computed: {
accountInUSD() {
return '$' + this.accountBalance
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 移行の戦略
フィルタを使う代わりに、算出プロパティか関数に置き換えることを推奨します。
# グローバルフィルタ
もし、グローバルにフィルタを登録していて、そしてアプリケーション全体でそのフィルタを使用している場合、そのフィルタを個々のコンポーネントで算出プロパティやメソッドに置き換えるのは不便でしょう。
その代わり、 globalProperties によって、すべてのコンポーネントがグローバルフィルタを利用できるようにすることができます:
// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
currencyUSD(value) {
return '$' + value
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
それから、この $filters オブジェクトを使って、次のようにすべてのテンプレートを修正できます:
<template>
<h1>Bank Account Balance</h1>
<p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
1
2
3
4
2
3
4
この方法は、メソッドのみ使用することができ、算出プロパティは使えないことに注意してください。後者は個々のコンポーネントのコンテキストで定義された場合にのみ意味を持ちます。