格式化资金输入可能有点痛苦。不同国家和文化如何格式化其货币和数值之间存在各种微小差异。编写一个可以处理任何这些情况的输入组件并不是太多的工作,但是当其他人已经为您完成时,为什么还要花费精力呢? (显然我是一个懒惰的程序员。)这就是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>

有了这个,你就有了一个很好的货币投入。 (也有复制粘贴功能!)