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 の違い

推薦する

InnoDB タイプの MySql によるテーブル構造とデータの復元

前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...

Vue のフィルターウィジェットの詳細な使用方法

この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...

JavaScript 関数型プログラミングの基礎

目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

MySQL での実行計画の explain コマンド例の詳細な説明

序文explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方...

Vueは下部のポップアップウィンドウで複数選択を実装します

この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...

Linuxで権限が拒否された場合の解決策の詳細な説明

許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...

JavaScriptの基本構文とデータ型の詳細な説明

目次JavaScript のインポート1. 内部ラベル2. 外部紹介基本的な構文データ型番号弦ブール...

XHTML 3つの文書型宣言

XHTML は 3 つのドキュメント タイプ宣言を定義します。最もよく使用されるのは XHTML T...

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

初心者向け入門講座⑧:記事サイトを簡単に作る

前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...

ブラウザがクロージャをどのように認識するかについて詳しく説明します

目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...

Linux+ApacheサーバURLの大文字と小文字の区別の問題を解決する

今日、問題が発生しました。ブラウザのアドレスバーにURLアドレスを入力する際、ページを正常にアクセス...