vue mask

In this example below you will see how to do a vue mask with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by trien, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright trien ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>vue mask</title>
  
  
  
  
  
</head>

<body>

  <script src="https://unpkg.com/vue@2.3.0/dist/vue.js"></script>

<div id="app">        
    raw : <p>{{raw}}</p>
    mask : <p>{{mask}}</p>
    <input type="tel" v-model="raw" @keyup="phoneMask" maxlength=10>
 </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/trien/vue-mask-mXRdgz */
let data = {
    raw: '',
    mask: ''
  },
  pad = "__.__.__.__.__",
  vm = new Vue({
    el: '#app',
    data: data,
    methods: {
      phoneMask: e => {
        let mask = '',
            raw = data.raw;
        for (let i = 0; i< 10; i++) {
          if (i > 0 && i%2 == 0) { mask+='.'; }
          mask+= raw.charAt(i) || '_';
        }
        data.mask = mask;
      }
    }
});

Comments