用 v-money 在 Vue.js 中轻松实现货币输入

格式化货币输入可能有点痛苦. 不同国家和文化如何格式化货币和数字值之间存在各种各样的小差异. 编写一个可以处理这些情况的输入组件不是太多的工作,但为什么在其他人已经为您做过时花费精力? (显然我是一个懒惰的程序员.) 这是 v-money的步骤。

安装

通过 Yarn 或 NPM 安装 v-money:

1# Yarn
2$ yarn add v-money
3
4# NPM
5$ npm install v-money --save

使用

使用v-money的最有用的方法可能是作为指令,尽管你也可以使用它(作为组件)(https://github.com/vuejs-tips/v-money#b-use-as-component-httpsjsfiddlenetauom8st8)。

 1<template>
 2  <div>
 3    <!-- Amount is the number that is input, moneyConfig is the v-money configuration object. -->
 4    <input v-model.lazy="amount" v-money="moneyConfig"/>
 5  </div>
 6</template>
 7
 8<script>
 9import { VMoney } from 'v-money';
10
11export default {
12  directives: { VMoney }
13  data() {
14    return {
15      // A super-low price of just $499.99! Get yours today!
16      amount: 499.99,
17      // The money directive's configuration.
18      moneyConfig: {
19        // The character used to show the decimal place.
20        decimal: '.',
21        // The character used to separate numbers in groups of three.
22        thousands: ',',
23        // The currency name or symbol followed by a space.
24        prefix: 'USD $ ',
25        // The suffix (If a suffix is used by the target currency.)
26        suffix: '',
27        // Level of decimal precision. REQUIRED
28        precision: 2,
29        // If mask is false, outputs the number to the model. Otherwise outputs the masked string.
30        masked: false
31      }
32    }
33  }
34}
35</script>

有了它,你有一个漂亮的货币输入,它只是工作。