Skip to content
Tiny (<2k gzipped) input/directive mask for currency
JavaScript Vue
Branch: master
Clone or download
Latest commit 694fecf Oct 17, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Upgrade to 0.8.1 Oct 16, 2017
docs v0.8.0 Jul 20, 2017
src accept empty directive config Oct 16, 2017
tests accept empty directive config Oct 16, 2017
.babelrc first commit Jun 12, 2017
.gitignore first commit Jun 12, 2017
README.md Better directive documentation Jul 20, 2017
build.config.js first commit Jun 12, 2017
package.json Upgrade to 0.8.1 Oct 16, 2017
yarn.lock packages upgrade Oct 16, 2017

README.md

v-money Mask for Vue.js

The Mask Money

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

For other types of mask, use vue-the-mask

Usage

A. Globally

import Vue from 'vue'
import money from 'v-money'

// register directive v-money and component <money>
Vue.use(money, {precision: 4})

B. Use as component: https://jsfiddle.net/auom8st8/

<template>
  <div>
    <money v-model="price" v-bind="money"></money> {{price}}
  </div>
</template>

<script>
  import {Money} from 'v-money'

  export default {
    components: {Money},

    data () {
      return {
        price: 123.45,
        money: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false
        }
      }
    }
  }
</script>

C. Use as directive: https://jsfiddle.net/nj3cLoum/2/

Must use vmodel.lazy to bind works properly.

<template>
  <div>
    <input v-model.lazy="price" v-money="money" /> {{price}}
  </div>
</template>

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

  export default {
    data () {
      return {
        price: 123.45,
        money: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false /* doesn't work with directive */
        }
      }
    },

    directives: {money: VMoney}
  }
</script>

Properties

property Required Type Default Description
precision true Number 2 How many decimal places
decimal false String "." Decimal separator
thousands false String "," Thousands separator
prefix false String "" Currency symbol followed by a Space, like "R$ "
suffix false String "" Percentage for example: " %"
masked false Boolean false If the component output should include the mask or not

References

You can’t perform that action at this time.