フィルターとは、マスタッシュ構文 {{ … }} でバインドしたデータに何らかの加工を加える機能のことです。
Vue.js の書き方を最初から知りたいという方はこちら(^^)
参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...
方法①:グローバルスコープにフィルターを登録
グローバルフィルターに登録することで、すべてのコンポーネントから利用できるようになります。
Vue.filter ( フィルター名 , 関数オブジェクト );
注意点
必ず new Vue よりも前に登録するようにしてください。
登録したフィルターを使うときは、マスタッシュ構文の中に以下のように書きます。
{{ プロパティ名 | フィルター名 }}
サンプルとして、税込金額を返すフィルターを作ります。
<div id="app">
{{price | taxedPrice}}
</div>
Vue.filter('taxedPrice', function(val) {
return val * 1.1;
});
// ↑ フィルターを必ず先に登録
var app = new Vue({
el: '#app',
data: {
price: 5000
}
});
price プロパティの値は5000ですが、フィルターをかけたことによって税込金額(10%として計算)の5500が出力されます。
ブラウザの表示結果↓

方法②:ローカルスコープに登録
filters オプションに登録することでローカルスコープになります。

他のコンポーネントからは参照できなくなるため、コンポーネントの独立性を保てるというメリットがあります。
先ほどのサンプルと同じものをローカルスコープで書くと次のようになります。
var app = new Vue({
el: '#app',
data: {
price: 5000
},
filters: {
taxedPrice: function(val) {
return val * 1.1;
}
}
});
HTMLに変更はありません。同様に5500と出力されます。
複数のフィルターをかける
{{ プロパティ名 | フィルター名 | フィルター名 }}
このように書くだけです(^^)
税込金額に変換するフィルターと、金額に「円」をつけるフィルターを2つかけてみます。
<div id="app">
{{price | taxedPrice | unit}}
</div>
var app = new Vue({
el: '#app',
data: {
price: 5000
},
filters: {
taxedPrice: function(val) {
return val * 1.1;
},
unit: function(val) {
return val + '円';
}
}
});
ブラウザの表示結果↓

無事2つのフィルターをかけることができました。
今回は以上です。
ご覧いただきありがとうございました(^^)
続きはこちら↓
参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...
コメント