Description:
A lightweight yet versatile number formatting & input masking library for Vue 3 and Vue 2 applications.
How to use it:
1. Import and register the vue-number-format.
// Globally
import Vue from "vue";
import number from "vue-number-format";
Vue.use(number, {
// options
});
// Locally
export default {
components: {
Number
},
};
2. Add the vue-number-format component to the template.
<template>
<div>
<number v-model="price" v-bind="number"></number> {{price}}
</div>
</template>
3. You can also use it as a Vue directive.
import { VNumber } from "vue-number-format";
export default {
data() {
return {
price: 123.45,
number: {
decimal: ".",
separator: ",",
prefix: "$ ",
suffix: " #",
precision: 2,
}
};
},
directives: {
number: VNumber
}
};
4. All default options.
export default {
prefix: '',
suffix: '',
separator: ',',
decimal: '.',
precision: 2,
minimumFractionDigits: false,
prefill: true,
reverseFill: false,
min: false,
max: false,
nullValue: ''
}
Preview:
Changelog:
v3.0.1 (05/01/2022)
- Emit input event
v3.0.0 (03/31/2022)
- fix some issue of reverse fill
v2.1.11 (03/08/2022)
- Update
Download Details:
Author: coders-tm
Live Demo: https://vue-number-format.netlify.app/guide/play-ground.html
Download Link: https://github.com/coders-tm/vue-number-format/archive/refs/heads/master.zip
Official Website: https://github.com/coders-tm/vue-number-format
Install & Download:
# Yarn
$ yarn add @coders-tm/vue-number-format
# NPM
$ npm i @coders-tm/vue-number-format