Vue.jsで通貨フィルターを実装する「vue-currency-filter」

vue-select-imageとは

vue-currency-filterは、軽量な通貨フィルターを実装できるライブラリです。

＄などのシンボルの位置を前後に変更したり、小数点の位置を動的に変更することができます。

【動画サイズ：331KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm install vue-currency-filter

yarn add vue-currency-filter

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-currency-filter.umd.js"></script>

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、軽量な通貨フィルターを実装します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import VueCurrencyFilter from 'vue-currency-filter'

UMDで実装する場合

const VueCurrencyFilter = window['VueCurrencyFilter']; 

step
2メソッドを設定

上記で取得したVueCurrencyFilterをVue.useに取り込みます。

Vue.use(VueCurrencyFilter,
{
  symbol : '',
  thousandsSeparator: ',',
  fractionCount: 2,
  fractionSeparator: '.',
  symbolPosition: 'front',
  symbolSpacing: true,
  avoidEmptyDecimals: undefined,
});

new Vue({
  el: '#app',
  data: {
    chsb: 10000,
    yield: 0.06
  },
  methods: {
    getYearyield: function(n){
     let days = 365*n;
     let totalyield = Number(this.chsb);
     for(let i=1; i<=days; i++){
       totalyield = totalyield + ((totalyield * this.yield)/365);
     }
     return totalyield;
   },
   getAddYearyield: function(n){
     return this.getYearyield(n) - this.getYearyield(n-1);
   }
  }
});

step
3テンプレートを準備

オプションを使って色を設定したりできます。

サンプルはケバブケースで記載しています。

<main id="app" class="flex-shrink-0">
  <div class="container">
    <div class="row mt-5 justify-content-lg-center">
      <h1 class="text-center">SwissBorg Yield推定</h1>
    </div>
    <div class="row mt-4 mb-4 justify-content-lg-center bg-light p-2 rounded">
      <div class="col-4">
        <div class="mb-3">  
          <label for="" class="form-label">CHSB数</label>
          <input type="text" class="form-control" v-model="chsb">
        </div> 
      </div> 
      <div class="col-4"> 
        <div class="mb-3">
          <label for="" class="form-label">Yield利率</label>
          <input type="text" class="form-control" v-model="yield">
        </div>
     </div> 
   </div>
   <table class="table table-hover table-bordered text-center">
     <thead>
       <tr>
         <th>年数</th>
         <th>CHSB数（年間）</th>
         <th>継続増加数</th>
       </tr>
     </thead>
     <tbody>
      <tr v-for="i in 10">
        <td>{{i}}年</td>
        <td>{{getYearyield(i) | currency}}</td>
        <td>{{getAddYearyield(i) | currency}}</td>
      </tr>
     </tbody>
   </table>
  </div>
</main> 

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen Vue.jsで通貨フィルターを実装する「vue-currency-filter」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

軽量な通貨フィルターを実装できるライブラリでした。

今日はこの辺でー