vue实现手机号码分段输入

2019-07-31  本文已影响0人  梦想_Dream

话不多说,上代码

<input type="tel" v-model="telephone"  maxlength="13">

js部分

data () {
    return {
      telephone: ''
    }
  },
  watch: {
    telephone (newValue, oldValue) {
      if (newValue > oldValue) {
        if (newValue.length === 4 || newValue.length === 9) {
          var pre = newValue.substring(0, newValue.length - 1)
          var last = newValue.substr(newValue.length - 1, 1)
          this.telephone = pre + ' ' + last
        } else {
          this.telephone = newValue
        }
      } else {
        if (newValue.length === 9 || newValue.length === 4) {
          this.telephone = this.telephone.trim()
        } else {
          this.telephone = newValue
        }
      }
    }
  },
上一篇 下一篇

猜你喜欢

热点阅读