vue 输入电话号码自动按3 4 4 分割显示数据，得到的值没有空格

您可以使用 Vue 的 computed 计算属性来实现自动按照3-4-4的格式分割电话号码并显示。以下是一个示例代码：

<template>
  <div>
    <input type="text" v-model="phoneNumber">
    {{ formattedPhoneNumber }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
    };
  },
  computed: {
    formattedPhoneNumber() {
      const regex = /^(\d{3})(\d{4})(\d{4})$/;
      const formatted = this.phoneNumber.replace(regex, '$1 $2 $3');
      return formatted;
    },
  },
};
</script>

这段代码中，我们使用了正则表达式来按照3-4-4的格式分割电话号码，并在模板中使用了计算属性 formattedPhoneNumber 来显示分割后的电话号码。

相关问题

vue 输入电话号码自动按3 4 4 显示数据，最后得到的电话号码没有空格

如果您不想在最终得到的电话号码中包含空格，可以使用如下代码：

<template>
  <div>
    <input type="text" v-model="phoneNumber" @input="formatPhoneNumber">
    {{ phoneNumber }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
    };
  },
  methods: {
    formatPhoneNumber() {
      let phone = this.phoneNumber.replace(/\D/g, '');
      if (phone.length > 3 && phone.length < 8) {
        phone = phone.replace(/(\d{3})(\d+)/, '$1 $2');
      } else if (phone.length >= 8) {
        phone = phone.replace(/(\d{3})(\d{4})(\d+)/, '$1 $2 $3');
      }
      this.phoneNumber = phone;
    },
  },
};
</script>

这段代码中，我们使用了 @input 事件监听输入框内容的变化，并通过 formatPhoneNumber 方法来格式化电话号码。在格式化时，我们使用了正则表达式来按照3-4-4的格式分割电话号码，并在分割后添加空格。最终，我们将格式化后的电话号码赋值给 data 中的 phoneNumber 属性，从而在模板中显示。