vue实现手机号码分段输入

话不多说,上代码

<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
        }
      }
    }
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,680评论 4 31
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,800评论 1 32
  • Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异...
    joker731阅读 4,274评论 0 12
  • 工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...
    HelloJames阅读 4,583评论 0 6
  • UINavigationController是iOS中非常常用的控件,之前用到哪个属性就去搜下设置下,一直都没有特...
    举个栗子wow阅读 4,075评论 0 4