Vue.jsでフィルター処理をする方法

フィルターとはマスタッシュ{{…}}でテンプレートにバインドしたデーターがテキストとして出力される前に、何らかの加工を加えること。

フィルター

グローバルスコープにフィルターを登録する

書式：Vue.filter(フィルター名、関数オブジェクト）

テキスト側書式：{{プロパティ名　｜　フィルター名}}

金額を3桁ずつカンマで区切った書式にしました。

　　　　

コンソールからの変更・確認の方法

　console →　「app.price = 好きな金額を入力」→　enter で試してみましょう。

HTML

<div id=”app”>
{{price | number_format}}
</div>

JavaScript

Vue.filter(‘number_format’, function(val){
return val.toLocaleString();
});
var app = new Vue({
el: ‘#app’,
data: {
price : 1000000
}
});

複数のフィルター

ローカルスコープにフィルターを登録する

書式：filters: {フィルター名：関数オブジェクト}

テキスト側書式：{{プロパティ名　｜　フィルター名　｜　フィルター名}}

HTML

<div id=”app2″>
{{price | unit}} ⇒　円をつけるだけのフィルター処理
{{price | number_format | unit}}　⇒　円をつけ、さらに3桁ずつカンマをつけるフィルター処理
</div>

JavaScript

var app2 = new Vue({
el:’#app2′,
data: {
price : 1000
},
filters: {
number_format: function(val)
return val.toLocaleString();
},
unit: function(val){
return val + ‘円’
}
}
});

わからないことはプロフェッショナルから学ぶのが一番