Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

v money

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Mask for Vue.js

This component lets you display a value as money/currency. You can specify the prefix ($) and the amount of digits.

If you have an input field, you can use it with that:

vue money

Features

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

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>
</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" />
</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>

Github: http://github.com/vuejs-tips/v-money#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy