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

介绍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>

我的5美分。假设你有一个手机模型，你希望应用格式。

data() {
   return {
     phone_number: null,
   };
 }

您的模板看起来像这样：

<template>
  <div>
    <input
      type="tel"
      placeholder="(123) 456-7890"
      class="form-control"
      id="input-phone"
      v-model="phone_number"
      maxlength="16"
      @input="enforcePhoneFormat()"
    />
  </div>
</template>

因此，在输入时，调用enforcePhoneFormat（）方法，该方法使用正则表达式并将输入转换为以下格式-(123) 345-6789。

methods: {    
  enforcePhoneFormat() {
    let x = this.phone_number
      .replace(/\D/g, "")
      .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);

    this.phone_number = !x[2]
      ? x[1]
      : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
  }
}

当然，要更改首选格式，必须更改正则表达式。

通常在Vue中，你用v-model处理表单。在一个典型的表单中，你可能在你的组件中有一个phoneNumber变量，并将它绑定到v-model的输入：

<template>
  <input name="phone" v-model="phoneNumber" />
</template>

<script>
export default new Vue ({
  data() {
    return {
      phoneNumber: '',
    }
  }
})
</script>

问题是v-model不允许在用户输入时动态更改值，所以这对您不起作用。
但是，您仍然可以使用v-bind提供值，并使用v-on对用户输入做出React，而不是使用v-model进行绑定。下面的代码片段将始终转换用户写入mayus的任何内容：

<template>
  <input name="phone" :value="phoneNumber" @input="handleUserInput" />
</template>

<script>
export default new Vue ({
  data() {
    return {
      phoneNumber: '',
    }
  },
  methods: {
    handleUserInput(input) {
      this.value = input.toUpperCase();
    }
  }
})
</script>

将格式应用于电话号码比toUpperCase()稍微复杂一点，但想法是一样的：

<template>
  <input name="phone" :value="phoneNumber" @input="handleUserInput" />
</template>

<script>
export default new Vue ({
  data() {
    return {
      phoneNumber: '',
    }
  },
  methods: {
    handleUserInput(input) {
      var replacedInput = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
      this.value = !replacedInput[2] ? replacedInput[1] : '(' + replacedInput[1] + ') ' + replacedInput[2] + (replacedInput[3] ? '-' + replacedInput[3] : '');
    }
  }
})
</script>

我建议使用一些开源的Vue组件来进行电话输入，比如：
https://github.com/LouisMazel/vue-phone-number-input
或
https://www.npmjs.com/package/vue-tel-input
他们真的很容易使用，它会保存你很多，因为你会浪费自己的电话输入组件。

对@Satyam Pathak代码进行了轻微修改，以支持动态传入属性名称。

<script>
export default new Vue ({
  data() {
    return {
      objectName: {},
    }
  }
})
</script>

methods:{
formatPhoneNumber(propertyName) {
      var x = this.objectName[propertyName]
                  .replace(/\D/g, "")
                  .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);

      this.objectName[propertyName] = !x[2]
        ? x[1] : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
    }
}

let phone_format = function (number) {
    var x = number.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    if (number.length < 11) {
        number = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3]:'');
    }
    return number;
};

你可以使用上面的fnc。
我就是这样用的。

<div class="position-relative">
    <input v-model="aa" style="opacity:0" />
    <div v-html="phone_format(aa)" style="position:absolute;top:0;left:0;width:100%;pointer-events: none;"></div>
</div>