#値段をカンマと円マーク表示 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)
vuejs カスタムフィルタ(opens new window)
v-html にフィルターかける時の設定(opens new window)

2020-02-19
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定