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

推薦する

Linux に MySQL 8.0.19 をインストールするための詳細な手順と問題解決方法

最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

コメント付きのスネークゲームを実装する js

この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...

Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?

IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...

クリック範囲を拡大する入力チェックボックスを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...

MySQL 5.7.15 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

dockerカスタムイメージでphp7をビルドする方法

まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...

Linux での NVIDIA GPU 使用状況の監視の詳細な説明

TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...

CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...

フロントエンドの状態管理(パート 1)

目次1. フロントエンドの状態管理とは何ですか? 2. ヴュークス3. バス4. ウェブストレージ序...

Dockerを使用してGitlabを素早くデプロイする方法

1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...