v-moneyを使用したVue.jsでのナンセンスな金銭的入力

投稿日: 2022-04-20 2022-10-06
タグ: Vue.js

入金のフォーマットは少し面倒です。さまざまな国や文化が通貨と数値をフォーマットする方法には、あらゆる種類の小さな違いがあります。これらのケースのいずれかを処理できる入力コンポーネントを作成するのはそれほど手間がかかりませんが、他の誰かがすでにそれを行っているのに、なぜ努力を費やすのでしょうか。（明らかに私は怠惰なプログラマーです。）そこでv-moneyが登場します。 Vue.jsアプリでマスクされた金銭的入力を表示するのに役立ちます。

インストール

YarnまたはNPMを介してv-moneyをインストールします。

# Yarn
$ yarn add v-money

# NPM
$ npm install v-money --save

使用法

v-money を使用する最も便利な方法は、おそらくディレクティブとしてですが、をコンポーネントとして使用することもできます。

<template>
  <div>
    <!-- Amount is the number that is input, moneyConfig is the v-money configuration object. -->
    <input v-model.lazy="amount" v-money="moneyConfig"/>
  </div>
</template>

<script>
import { VMoney } from 'v-money';

export default {
  directives: { VMoney }
  data() {
    return {
      // A super-low price of just $499.99! Get yours today!
      amount: 499.99,
      // The money directive's configuration.
      moneyConfig: {
        // The character used to show the decimal place.
        decimal: '.',
        // The character used to separate numbers in groups of three.
        thousands: ',',
        // The currency name or symbol followed by a space.
        prefix: 'USD $ ',
        // The suffix (If a suffix is used by the target currency.)
        suffix: '',
        // Level of decimal precision. REQUIRED
        precision: 2,
        // If mask is false, outputs the number to the model. Otherwise outputs the masked string.
        masked: false
      }
    }
  }
}
</script>

そしてそれで、あなたはちょうどうまくいく素晴らしい金銭的インプットを持っています。（コピー＆ペースト機能も！）

getdocs

13036