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

你可以使用 Vue 自定义过滤器来实现输入电话号码自动按 3 4 4 分割并显示的需求，代码如下所示：

Vue.filter('phoneFormat', function(value) {
  if (!value) return ''
  value = value.toString().trim().replace(/^\+/, '')

  if (value.match(/[^0-9]/)) {
    return value
  }

  var country = ''
  var city = ''
  var number = ''

  switch (value.length) {
    case 10: // +1PPP####### -> C (PPP) ###-####
      country = 1
      city = value.slice(0, 3)
      number = value.slice(3)
      break

    case 11: // +CPPP####### -> CCC (PP) ###-####
      country = value[0]
      city = value.slice(1, 4)
      number = value.slice(4)
      break

    case 12: // +CCCPP####### -> CCC (PP) ###-####
      country = value.slice(0, 3)
      city = value.slice(3, 5)
      number = value.slice(5)
      break

    default:
      return value
  }

  if (country === 1) {
    country = ''
  }

  number = number.slice(0, 3) + '-' + number.slice(3)

  return (country + ' ' + city + ' ' + number).trim()
})

然后在你的 Vue 组件中，使用这个自定义过滤器来格式化电话号码，代码如下所示：

<template>
  <div>
    <label>电话号码：</label>
    <input type="text" v-model="phoneNumber">
    <div>格式化后的电话号码：{{ phoneNumber | phoneFormat }}</div>
  </div>
</template>

这样，当你在输入框中输入电话号码时，它会自动按照 3 4 4 的格式进行分割，并格式化显示出来，而且没有空格。