Vueと共通

【Nuxt.js】filter実践編:数字3桁ごとにカンマを入れよう!

前置き

テキストの変換処理ができるfilter🌟
computedやmethodsでも
同じことはできますが毎回作るのは面倒。
そんな時に便利なfilterです♪

今回は基本的な使い方と、
代表的な使用例をやっていきます🍒
・使い方:ローカルver
・使い方:グローバルver
・使用例:代表的な数字3桁ごとにカンマ
・使用例:絞り込み検索

【覚えること】
・基礎文法
・引数に必ずvalueがくる

使い方:ローカルver

テキストを全て大文字にします💡

【基礎文法】
該当ファイルのexport default内

) pages

{{ }} Mustache構文内に
filter名をパイプ記号( | )で繋げる

使い方:グローバルver

テキストを全て小文字にします💡

【基礎文法】
jsファイル内に記載

) file

) pages

✴️ちなみに連結して繋げるのもOK!
textが大文字小文字があっても…
・toUppercase()で全て大文字に変換
・toLowercaseで全て小文字に変換
最終的に全て小文字になります〜!

使用例:数字の3桁ごとにカンマ

filterの代表的な使用例ですね。
ついでにランダムで整数を表示させます。
乱数は10桁以上の数値にしました🌟

方法1

toLocaleString()関数が簡単🤗

) file

) pages

方法2

正規表現でやる場合🤗
filer.jsを書き換えます!

・toString()関数
 数値を文字列と認識して桁数を把握。
・replace()関数
 文字列を()内の正規表現に置き換え。
・/(\d)(?=(\d{3})+$)/g, '$1,'
 構造は…

/(fuga)(?=(hoge))/

こちらの記事で解説されております!
https://qiita.com/ariyo13/items/ab410a84c74b23099648

使用例:絞り込み検索

) pages

データ更新の必要がないため
methodsではなくcomputedに記載します🌟

v-modelを使って表示させるため
{{ }} Mustache構文内に
filter名を繋げる必要はありません!

-Vueと共通
-,

© 2020 aLiz Nuxt