The awesome-mask runs with Vue.js
and uses the vanilla-masker
to make your form awesome with masks.
You can use patterns like:
<input type="text" v-mask="'99/99'" /> // Turns 1224 in 12/24
<input type="text" v-mask="'(99) 9999-9999'" /> // Turns 1149949944 in (11) 4994-9944
<input type="text" v-mask="'AAA-9999'" /> // Turns ABC1234 in ABC-1234
You can also format money:
<input type="text" v-mask="'money'" /> // Turns 123499 in 1.234,99
This directive can also receive a object from your data
like:
<template> <p> <input v-mask="mask" type="text"> </p> </template> <script> export default { data() { return { mask: '999.999.999-99' } } } </script>
Sample using import:
<script> import Component from './components/Component' import AwesomeMask from 'awesome-mask' export default { name: 'app', components: { Component }, directives: { 'mask': AwesomeMask } } </script>