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

 <input type="text" id="phone" placeholder="[phone]"/>

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

原文由 Marek Barta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

他们的文档很棒，您可以从那里开始 - https://v2.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>

原文由 Satyam Pathak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

介绍 Vue-The-Mask 。

npm install vue-the-mask

在你的组件中

<template>
    <input v-mask="['(###) ###-####']"/>
</template>

<script>
import {mask} from 'vue-the-mask'
export default{
    name: "myComponent",
    directives:{mask}
}
</script>

原文由 Alan Spurlock 发布，翻译遵循 CC BY-SA 4.0 许可协议