# 値段をカンマと円マーク表示 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 2年前

vuejs

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説よく使われる v-if と v-show の...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

vuejs-datepicker 使ってカレンダー表示日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

polyfill という宝物で開発時の ie11 対応した時のメモ

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

関連記事