この記事の例では、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 の違い
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...
WeChatアプレットフォームの検証、参考までに具体的な内容は次のとおりです。プラグインWxVali...
コンポーネントの props (props はオブジェクトです)機能: コンポーネントに渡されたデー...
1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...
序文実際には、次のような問題に遭遇する可能性があります。特定のレコードの ID がわかっていて、その...
参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...
重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...
目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...
いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...
React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...
この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...
Docker サービス アプリケーションを再起動するコマンドを見てみましょう。具体的な内容は次のと...
2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...
序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...