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