Vue.js

【Vue.js】フィルタを使ってデータを加工する

生徒さん
生徒さん
Vue.jsのfilters(フィルタ)って何に使うの?どんな意味があるの?

以上の疑問の解決記事です。

Vue.jsのフィルタはdataの値を加工して、ブラウザに表示させます。
例えば、JavaScriptのtoLocaleStringメソッドで、「数値をコンマ区切りにする処理」がフィルタ機能を使ってできます。

こんな感じです。

298000 → 298,000

 

ゆう
ゆう
これをVue.jsのfilters(フィルタ)を使って表示させるよ。

では、早速コードを見ていきましょう。

 

フィルタの書き方

書き方としては、以下の通りです。

 

Vueインスタンス内

filters: {
    toLocale(num) {
        return num.toLocaleString()
    },
}

numには、フィルタをかけるデータの値が入ります。

ゆう
ゆう
詳細は、この後の「全体のコード」を見てね。

 

HTML要素内

<p>{{price | toLocale}}</p>

|で区切ります。

全体のコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js APP</title>
</head>
<body>
    <div id="app">
        <p>{{price | toLocale}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    price: 298000
                }
            },
            filters: {
                toLocale(num) {
                    return num.toLocaleString()
                },
            }
        })
    </script>
</body>
</html>

 

ポイントとしては、以下の通りです。

dataの値を定義する
filtersに処理を記述する
HTML要素のマスタッシュ{}構文内に|でフィルタを記述する

 

これでコンマ区切りのテキストが表示されます。

priceはコンマなしだが、ブラウザではコンマ区切りに加工されて表示

 

 

まとめ

本記事では、「【Vue.js】フィルタを使ってデータを加工する」について、以下のことをお伝えしました。

フィルタの書き方

使い回しもできて、簡単に使用できるので、ぜひ使ってみてください。

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。