小编Mar*_*rta的帖子

我是 Vue.js 的新手，并试图找到一种方法，如何将输入字段中的电话号码格式化为所需的格式。我能够在用纯 javascript 编写的 stackoverflow 上找到答案，但我不知道如何在 Vue 中使用正则表达式。

javascript中的解决方案

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] : '');
});

所以我的问题是如何将它应用到这个输入 div 上？因此，它允许用户只输入数字，并且在他输入时，数字以所需的格式显示。

<div contentEditable="true" class="inputDiv"></div>

例如我想使用 vue.js 实现的目标。

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] …