ワイズリマインダー

Vueで三桁カンマにする

次の条件のもと作成されています。
・CompositionAPIを使用。

 

【ポイント】
メソッドを使用する。

 

index.html

<body id="body">
{{ number_format(varA) }}<br>
{{ number_format(varB) }}<br>
</body>

 

index.js

'use strict';

Vue.createApp({
  setup( ){
    const varA = 1234;
    const varB = 'ABCD';

    const number_format = ( v ) => {
      if (typeof(v) != "number") return v;
      return v.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' ); 
    };

    return {
      varA,
      varB,
      number_format
    }
  }
}).mount('#body');

【実行結果】
1,234
ABCD

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク