- Lightweight (<2KB gzipped)
- Dependency free
- Mobile support
- Component or Directive flavors
- Accept copy/paste
- Editable
For other types of mask, use vue-the-mask
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>| 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 |