この記事の例では、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 の違い
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...
フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...
前回述べた問題を解決するために、オンラインで検索したところ、非常に優れたビジュアル インターフェース...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
zhangxinxu より https://www.zhangxinxu.com/wordpress...
MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...
目次1. Ant Design Vueを統合する2. コンポーネントの使用1. 完全な引用2. コン...
みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実...
序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...
マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...
MyCATとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベースク...
背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...
目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...
この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...