Vue.js 应用电话号码格式

Question

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

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

我试图寻找一个可能非常直接的答案，但由于我是 Vue 的新手，我无法找到任何可以帮助我使其工作的答案。

Answer 1

您可能需要了解 vue 的工作原理并进行一些演练以更好地理解。

他们的文档很棒，你可以从那里开始 - https://vuejs.org/v2/guide/

对于这个问题，这是一种可以利用框架的方法

new Vue({
  el: "#app",
  data: {
    value: ''
  },
  methods: {
    acceptNumber() {
        var x = this.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  this.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Phone number</h2>
   <input v-model="value" type="text" @input="acceptNumber">
</div>