- フィルターとは何か？ ====================
フィルターは、表示前にデータに対して追加の処理を行う仕組みであり、元のデータを変更するのではなく、新しいデータを生成して表示します。
- フィルターの利用方法 ==================
<!-- ダブル波括弧内での使用 -->
<div>{{ プロパティ名 | フィルタ名 }}</div>
<div>{{ プロパティ名 | フィルタ名(引数) }}</div>
<!-- `v-bind` 内での使用 -->
<div v-bind:id="プロパティ名 | フィルタ名"></div>
<div v-bind:id="プロパティ名 | フィルタ名(引数)"></div>
- Vueのフィルターの種類 ========================
フィルターには2つのタイプがあります。それぞれローカルフィルターとグローバルフィルターです。すべてのフィルターは関数であり、処理対象のデータを引数として受け取ります。
ローカルフィルター：現在のコンポーネントでのみ有効 グローバルフィルター：全コンポーネントで利用可能
1) ローカルフィルター
構文：
new Vue({
filters: {
'フィルタ名': function (値1[,値2,...] ) {
// 処理ロジック
}
}
})
実装例：
// Vueインスタンスを作成し、ViewModelを得る
var vm = new Vue({
el: '#app',
data: {
text: 'かつて、私は純真な少年でした。その純真な私は、誰が世界で最も純真な男かと、愚かに尋ねました'
},
methods: {},
// 現在のVueオブジェクトでのみ使用可能なローカルフィルターを定義
filters: {
formatDate(text) {
return text+'YYYYY';
}
}
});
2) グローバルフィルター
構文：
Vue.filter('フィルタ名', function (値1[,値2,...] ) {
// 処理ロジック
})
実装例：
<div id="app">
<p>{{ text | textFormat('激しい','--')}}</p>
</div>
<script>
// 名前が textFormat のグローバルフィルターを定義
Vue.filter('textFormat', function(text, arg, arg2) {
// 文字列の replace メソッドでは、第一引数に文字列だけでなく正規表現も指定可能
return text.replace(/純真/g, arg+arg2)
})
</script>
注意点：
1. 同じ名前のフィルターがローカルとグローバルで定義されている場合、より近いスコープのフィルターが優先的に呼び出されます。つまり、ローカルフィルターはグローバルフィルターよりも優先されます。
2. 一つの式に複数のフィルターを適用できます。フィルター間はパイプ記号「|」で区切ります。実行順序は左から右へです。
3. 一つのデータに対して複数のフィルターを適用することが可能です。左から右へ順番に実行され、次のフィルターは前のフィルターの結果を受け取ります。そのため、実行順序には注意が必要です。
以上が個人的な学習まとめです。ご指摘やご意見をお待ちしています。