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 属性，从而在模板中显示。

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

可以使用`watch`监听电话号码的变化，然后在回调函数中对电话号码进行处理，最后将处理后的电话号码赋值给`v-model`绑定的变量。具体实现可以参考以下代码：

<template>
  <div>
    <input v-model="phoneNumber" type="tel">
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: ''
    }
  },
  watch: {
    phoneNumber(newVal, oldVal) {
      // 去除空格
      newVal = newVal.replace(/\s/g, '')
      // 截取前11位数字
      newVal = newVal.substring(0, 11)
      // 按3 4 4格式展示
      newVal = newVal.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
      // 将处理后的电话号码赋值给v-model绑定的变量
      this.phoneNumber = newVal
    }
  }
}
</script>

这样就可以实现输入电话号码只能为11位且自动按3 4 4显示数据，并且最后得到的电话号码没有空格。