この記事の例では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています
>>: XHTML チュートリアル: Transitional と Strict の違い
最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...
Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...
IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...
XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...
この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...
序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...
まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...
TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...
Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...
目次1. フロントエンドの状態管理とは何ですか? 2. ヴュークス3. バス4. ウェブストレージ序...
1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...