Vue.jsのフィルタを使って消費税と3桁ごとのカンマをつける
※本記事は自分のブログ（ https://haru0101.github.io/velosa/ ）、およびQiita.comにも同じ内容を投稿しております。
フィルタとは
dataなどを整形するときに用います。
今回では、『1000』というdataを渡したら、消費税込みの『1100』、3桁ごとのカンマのついた『1,100』を表示させるのがゴールです。
computedとの違いは？
フィルターはcomputedと違い、連結することができます。
先に述べたように、消費税の税率をかけたあとに、その値を3桁ごとにカンマで区切ることができます。
また、もとのdataを変更せずにあくまで表示するときだけのフィルターです。
実際のコード
『|』でフィルタを連結することができます。
引数はフィルタ側では受け取れますが、呼び出すときは第1引数のみ省略することができます。
<div id="app">
<h2>消費税込み価格</h2>
<p>{{ price | includedTax }}</p>
<!-- 結果：1100 -->
<h2>消費税込み + 3桁ごとのカンマ</h2>
<p>{{ price | includedTax | formatNumber }}</p>
<!-- 結果：1,100 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
price: 1000
},
filters: {
includedTax: function (price) {
return price * 1.1
},
formatNumber: function (price) {
return price.toLocaleString()
}
}
})
</script>
第2引数以上ある場合
第1引数はかってにフィルタをかけるdata、今回でいうpriceだと判断してくれます。
よって第2引数以上になった場合から、フィルタの呼び出しの際に引数を指定します。
<div id="app">
<h2>消費税込み価格</h2>
<!-- 第1引数のpriceは省略できる -->
<!-- 第2引数のtaxRateから指定する -->
<p>{{ price | includedTax(1.1) }}</p>
<!-- 結果：1100 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
price: 1000
},
filters: {
includedTax: function (price, taxRate) {
return price * taxRate
}
}
})
</script>
グローバルフィルタについて
今まで定義したのはローカルフィルタであり、コンポーネント内でしか参照することができません。
どのコンポーネントからも参照できるようにするには、グローバルフィルタを定義する必要があります。
呼び出し方は一緒ですが、定義の仕方が違います。
ポイントは、Vueの読み込みのあと、かつ、インスタンス化の前です。
書き方
<div id="app">
<h2>消費税込み価格</h2>
<!-- 第1引数のpriceは省略できる -->
<!-- 第2引数のtaxRateから指定する -->
<p>{{ price | includedTax(1.1) }}</p>
<!-- 結果：1100 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.filter('includedTax', function(price){
return price * 1.1
})
var app = new Vue({
el: '#app',
data: {
price: 1000
}
})
</script>
Author And Source
この問題について(Vue.jsのフィルタを使って消費税と3桁ごとのカンマをつける ), 我々は、より多くの情報をここで見つけました https://zenn.dev/harryduck/articles/3cd4eca19be087845aa4著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol