Vueはデジタル千単位区切り形式をグローバルに実装します

Vueはデジタル千単位区切り形式をグローバルに実装します

この記事の例では、Vue がデジタル 3 桁区切り形式をグローバルに実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

これはどういう意味ですか?たとえば、88888 というデータをページにレンダリングする必要がある場合、1000 分の 1 単位で 88,888 という読みやすい形式で表示する必要があります。

このとき、私が行うことは、vue でフィルターを記述し、このフィルターを使用してすべてのデータをフィルターすることです。

関係するデータが比較的大きいため、各ページで参照する必要がないように、このフィルターをグローバルにマウントしました。

変換コードの実装

まず、数字の千単位の区切りの変換機能を実装するファイル numberToCurrency.js を作成します。

エクスポート関数 numberToCurrencyNo(値) {
  if (!value) が 0 を返す
  // 整数部分を取得します const intPart = Math.trunc(value)
  // 整数部処理、増加、
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 定義済みの小数部 let floatPart = ''
  // 値を小数部と整数部に切り捨てます const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 小数部分があります floatPart = valueArray[1].toString() // 小数部分を取得します return intPartFormat + '.' + floatPart
  }
  intPartFormat + floatPartを返す
}

はい、これは達成されました。もちろん、他の要件がある場合は、実際の状況に応じて具体的な変換コードを変更する必要があります。

次は引用です。

参照マウントグローバル

先ほど作成したフィルター ファイルを main.js ファイルにインポートし、グローバルにマウントします。

'@/utils/numberToCurrency' から { numberToCurrencyNo } をインポートします。
// グローバル フィルターを設定して、デジタルの 1000 分の 1 形式を実装します Vue.filter('numberToCurrency', numberToCurrencyNo)

これで完了です。変換が必要な場所で使用できます。

使用

使用する場合、通常のフィルターと同様です。

<p class="num color1">{{riskAll| 数値から通貨}}</p>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue の補間、式、区切り、命令の知識のまとめ

<<:  MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

>>:  XHTML チュートリアル: Transitional と Strict の違い

推薦する

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

WeChatアプレットがフォーム検証を実装

WeChatアプレットフォームの検証、参考までに具体的な内容は次のとおりです。プラグインWxVali...

Reactでpropsを使用する方法と制限する方法

コンポーネントの props (props はオブジェクトです)機能: コンポーネントに渡されたデー...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

ページングのどのページでMySQLのレコードをクエリするか

序文実際には、次のような問題に遭遇する可能性があります。特定のレコードの ID がわかっていて、その...

Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...

React 並行関数エクスペリエンス (フロントエンド並行モード)

React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...

Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...

自動開始および停止コマンドを適用するには、Docker サービスを再起動します (推奨)

Docker サービス アプリケーションを再起動するコマンドを見てみましょう。具体的な内容は次のと...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

水平ヒストグラムを作成するための MySQL ソリューション

序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...