title: Vue.js aplying phone number format
body: <p>I'm new to Vue.js and was trying to find a way how to format a phone number in an input field to the desired format. I was able to find an answer here on stackoverflow written in plain javascript but I dont know how to use the regex in Vue.</p>
  
  <p>Solution in javascript</p>
  
  <pre><code>document.getElementById('phone').addEventListener('input', function (e) {
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
  });
  </code></pre>
  
  <p>So my question is how to apply it on this input div? So it allows the user to type only numbers and as he is typing the number is showing in the desired format.</p>
  
  <pre><code>&lt;div contentEditable="true" class="inputDiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Example what I would like to achive using vue.js.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('phone').addEventListener('input', function (e) {
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="phone" placeholder="(555) 555-5555"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I was trying to look for an answer which is probably pretty stright forward but since I'm new to Vue I was unable to find anything which would help me to make it work.</p>