# 値段をカンマと円マーク表示 vuejs money-format filter 自作

vue filter の基本構造
vue.filter("filterID" , filter function);

Vue.filter("reverse", function(value) {
  return value
    .split("")
    .reverse()
    .join("");
});

自作したお金マークとカンマ入表示フィルター

@/filters/index.js

import Vue from "vue";

// 数字にカンマ入
function numberFormat(num) {
  return (num || 0)
    .toString()
    .replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","));
}

// お金の円マークとカンマ入
function moneyFormat(num) {
  return (
    "¥" +
    (num || 0)
      .toString()
      .replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","))
  );
}

// 一文字目大文字変換
function uppercaseFirst(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

Vue.filter("number", numberFormat);
Vue.filter("money", moneyFormat);
Vue.filter("upperFirst", uppercaseFirst);

nuxt 使用時の nuxt.config.js 設定

nuxtjs はデフォルトでフィルター機能用意してなくて~~(簡単すぎるから?)~~
自作したフィルターをプラグインに掘り込んだら、ビルドで実行してくれてグローバル登録が完了し、好きなところで利用できます。

plugins: ["~/filters"];

使い方

{{ 10000 | number }} // 10,000 {{ 10000 | money }} // ¥10,000
{{ "abc" | upperFirst }} // Abc

参考

nuxt プラグインドキュメント (opens new window)
v-html にフィルターかける時の設定 (opens new window)

2020-02-19
  • vuejs

関連記事

Nuxtjs 3 に Ant design Vue を使う
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
vuejs v-if と v-show の違い
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
javascript password generator ランダム文字列パスワード作成
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ