Filters（フィルタ）を利用すると、データの加工をおこない表示させることができます。主に数字のカンマ区切りや、テキストデータに対して利用されます。
小文字で入力した英語を、大文字に変換するフィルタです。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <p><input type="text" v-model="msg" /></p> <p>{{ msg | uppercase }}</p> </div> <script> new Vue({ el: '#app', data: { msg: "hello" }, filters: { uppercase: function (value) { return value.toUpperCase() } } }); </script> </body> </html> |
filtersオプションにおいて、uppercaseという適当に付けた名前のプロパティ（いわゆるフィルタ名）を用意し、大文字に変換するための関数を記述しています。このuppercaseを、変換したいデータ（msg）に{{ msg | uppercase }}のように記述します。
フィルタは連続して設定することができます。下記では、更に文字列を反転するフィルタを設定しています。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <p><input type="text" v-model="msg" /></p> <p>{{ msg | uppercase | reverse }}</p> </div> <script> new Vue({ el: '#app', data: { msg: "hello" }, filters: { uppercase: function (value) { return value.toUpperCase() }, reverse: function (value) { return value.split("").reverse().join(""); } } }); </script> </body> </html> |
グローバルフィルタ
上述したコードは、ローカルフィルタであり特定のコンポーネント内でしか利用できませんが、グローバルフィルタとして登録すると、すべてのコンポーネント内にて利用できるようになります。
下記はVue ClI によって作成したプロジェクトにグローバルフィルタを設定した例です。Vue ClI については下記ページをご参照下さい。
Vue CLI 3 ではじめるVue RouterとVuex入門
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false Vue.filter("uppercase", function(value) { return value.toUpperCase() }); new Vue({ router, store, render: h => h(App) }).$mount('#app') |
8〜10行目
小文字で入力した英語を大文字に変換するフィルタを、グローバルフィルタとして登録しています。
About.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <div class="about"> <h1>This is an about page</h1> <p><input type="text" v-model="msg"></p> <p>{{ msg | uppercase }}</p> </div> </template> <script> export default { data:function() { return { msg: "hello" }; } }; </script> |
