Vue.js

フィルターとはマスタッシュ{{...}}でテンプレートにバインドしたデーターがテキストとして出力される前に、何らかの加工を加えること。| What is a filter? Before the data bound to the template with Mustache {{...}} is output as text, some processing is added.

「フィルター」

グローバルスコープにフィルターを登録する | Register the filter in the global scope

書式：Vue.filter(フィルター名、関数オブジェクト）| Format: Vue.filter (filter name, function object)

テキスト側書式：{{プロパティ名　｜　フィルター名}} | Text side format: {{property name | filter name}}

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

「F12」→　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
}
});

「複数のフィルター | Multiple filters 」

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

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

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

{{price | unit}} ⇒　円をつけるだけのフィルター処理
{{price | number_format | unit}}　⇒　円をつけ、さらに3桁ずつカンマをつけるフィルター処理

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 + '円'
}
}
});

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

-->

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー