以下の基本テンプレートに実際にコードを書き加えながら学習していきます。index.htmlというファイル名でデスクトップに保存して準備をしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】フィルタ学習</title> <style> </style> </head> <body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', }) </script> </body> </html> |
フィルタの書き方の基本を覚えよう
フィルタは、Mustacheとv-bind、2つの場所で書くことができます。
Mustacheの書き方
{{ フィルタに渡すデータ | フィルタ }}
試しに以下の条件でコーディングしてみましょう。
- フィルタに渡すデータは数値の1000
- フィルタオプションの関数は受け取った数値を2倍にして返す
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】フィルタ学習</title> <style> </style> </head> <body> <div id="app"> <div>{{ 1000 | toDouble }}</div> <!-- ①ここに追加 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', // ②ここから追加 filters: { toDouble: function(val) { return val * 2; }, }, // ②ここまで追加 }) </script> </body> </html> |
ブラウザで実行してみてください。
2000という数値が表示されましたか？
フィルタの流れを図解します。
数値1000をtoDoubleの引数にして呼び出しています。toDouble関数では1000を2倍にした数値をリターンしています。
v-bindの書き方
v-bindで使用する場合はつぎのように書きます。
<div v-bind:id=”フィルタに渡すデータ | フィルタ”></div>
フィルタはこんな時に使うと便利
商品の金額を税込金額に変換→カンマで区切るという処理をフィルタを使ってコーディングしてみましょう。テンプレートのソースコードをつぎのように編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】フィルタ学習</title> <style> ul { list-style-type: none; padding: 0; margin: 0; } li { border-bottom: 1px dotted #ccc; padding: 1em 0; } </style> </head> <body> <div id="app"> <div> <ul> <li v-for="item in items"> {{ item.name }} ： {{ item.price | convertingToIncludingTax | addingComma }}円(税込) </li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var items = [ { name: 'ロボットのおもちゃ', price: 3000 }, { name: 'テレビゲーム', price: 30000 }, { name: '自転車', price: 15000 }, ]; new Vue({ el: '#app', data: { items: items, }, filters: { convertingToIncludingTax: function(val) { return Math.round(val * 1.08); }, addingComma: function(val) { return val.toLocaleString(); } }, }) </script> </body> </html> |
ブラウザで表示すると以下の画面が表示されます。金額が税込でカンマ有の表示に変わりました。
処理の流れを解説します。
この例のようにフィルタは連結することができます。フィルタ名は保守性を高めるためにも、処理内容を表す適切なものを選びましょう。
この処理をフィルタを使わないでHTML要素内だけで完結させると以下のようになります。
1 2 3 | <li v-for="item in items"> {{ item.name }} ： {{ (item.price * 1.08).toLocaleString() }}円(税込) </li> |
この例のように簡単な処理なら問題ありませんが、長い式が必要な処理を行う場合は、HTMLの見通しが悪くなってしまうので、フィルタオプションを使うことをおすすめします。
フィルタは JavaScript 関数なので、引数を取ることができます。
{{ フィルタに渡すデータ | フィルタ(引数A, 引数B) }}
ここでフィルタは3つの引数をとる関数として定義されています。フィルタに渡すデータは第1引数に渡されます。引数Aは、第2引数としてフィルタに渡されます。そして、引数Bは第3引数としてフィルタに渡されます。
