vue input双向绑定时处理number类型数据为3-4-4类型（如手机号码）_vue input-number联动

这里input框使用的是vant组件的Field

import Vue from 'vue';
import { Field } from 'vant';

Vue.use(Field);
1
2
3
4

<van-field
    v-model="loginPhone"
    type="tel"
    maxlength="13"   //此处长度为13是因为11位手机号码+两个空格
    clearable
    placeholder="请输入手机号"
  />
1
2
3
4
5
6
7

使用vue的watch来监听改变并处理空格

watch: {
    loginPhone (newValue, oldValue) {
      newValue = newValue.replace(/\s+/g, "");
      if (newValue.length > 3 && newValue.length < 8) {
        newValue = newValue.replace(/^(\d{3})/g, '$1 ')
      } else if (newValue.length >= 8 && newValue.length < 12) {
        newValue = newValue.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
      }
      this.loginPhone = newValue
      return newValue
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12

利用replace正则表达式来添加空格
效果：

（一开始的想法是利用input框的@keyup @keydown @keypress 来处理，但是这样做由于数据的双向绑定，每次处理空格时都会重新给input的value重新赋值 导致虽然第4位开始有空格出现 但是输入第5位、第6位时会闪一下再出现空格 效果很不好）