美文网首页
vue实现手机号码分段输入

vue实现手机号码分段输入

作者: 梦想_Dream | 来源:发表于2019-07-31 17:47 被阅读0次

话不多说,上代码

<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
        }
      }
    }
  },

相关文章

网友评论

      本文标题:vue实现手机号码分段输入

      本文链接:https://www.haomeiwen.com/subject/tfotdctx.html