时间戳

首页 > 解决方案 > Vue.js 应用电话号码格式

vue.js - Vue.js 应用电话号码格式

问题描述

我是 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="(555) 555-5555"/>

我试图寻找一个可能非常直截了当的答案，但由于我是 Vue 的新手，所以我找不到任何可以帮助我让它工作的东西。

标签： vue.js

解决方案

您可能需要看看 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>

推荐阅读