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

推薦する

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

MySQL 実行ステータスの表示と分析

MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...

フレックスレイアウトにおける画像変形の解決策の詳細な説明

フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...

Docker で Portainer ビジュアル インターフェースを構築するための詳細な手順

前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

CSS プロパティ display:flow-root 宣言を 1 つの記事でマスターする

zhangxinxu より https://www.zhangxinxu.com/wordpress...

mysql8.0.19 の基本データ型の詳細な説明

MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...

Vue3 (パート 2) Ant Design Vue の統合

目次1. Ant Design Vueを統合する2. コンポーネントの使用1. 完全な引用2. コン...

Linux コマンド クエリ アプレットでの WePY クラウド開発の実践

みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実...

ウェブサイトにダークモード切り替え機能を持たせるための純粋なCSSフリー実装コード

序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

mycat を使用して MySQL データベースの読み取りと書き込みの分離を実装する例

MyCATとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベースク...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...

clipboard.js の使用法の概要

目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...