Vue.jsにおけるフィルタ機能。
特定の文字を変換したりする際に有効な機能です。
ということで今回は、Vue.jsにおけるフィルタについて解説していきます！
フィルタとは
「フィルタ」とは、文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能です。
フィルタの使い方
登録したフィルタは、Mustacheまたはv-bindディレクティブの値にパイプ「|」でフィルタ名をつなげることで呼び出します。
|
1 2 3 4 |
<!-- Mustacheで使用する場合 --> {{ 対象のデータ | フィルタの名前 }} <!-- v-bindで使用する場合 --> <div v-bind:id="対象のデータ | フィルタの名前"></div> |
ローカルへの登録
コンポーネントのfiltersオプションに登録することで、特定のコンポーネント内でのみ使用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> {{ price | localeNum }}円 </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 |
var app = new Vue({ el: '#app', data: { price: 19800 }, filters: { localeNum: function(val) { return val.toLocaleString() } } }) |
グローバルへの登録
汎用的なフィルタはグローバルメソッドVue.filterを使って登録することで、すべてのコンポーネントから使用できます。
|
1 2 3 |
Vue.filter('localeNum', function(val) { return val.toLocaleString() }) |
フィルタに引数を持たせる
次のように、2つ目以降の引数を持たせることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> {{ message | filter(foo, 100) }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 |
var app = new Vue({ el: '#app', filters: { filter: function(message, foo, num) { console.log(message, foo, num) } } }) |
この例では、第1引数としてmessageプロパティの値、第2引数としてfooプロパティの値、第3引数として100が受け取れます。
複数のフィルタをつなげて使用する
複数のフィルタをパイプでつなげ、メソッドチェーンのように扱うこともできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> 180度は{{ 180 | round | radian }}ラジアンだよ </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var app = new Vue({ el: '#app', filters: { // 小数点以下を第2位に丸めるフィルタ round: function(val) { return Math.round(val * 100) / 100 }, // 度からラジアンに変換するフィルタ radian: function(val) { return val * Math.PI / 180 } } }) |
まとめ
今回はVue.jsにおけるフィルタについて解説しました。
フィルタはうまく使うことで、文字列変換などの処理を綺麗にまとめることができるのでドンドン使っていきましょう！
ではまた！
おすすめ本
僕がVue.jsの勉強をする際に購入した本になります。
この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ！