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