Vue实现数字输入框中分割手机号码实例教程

web前端|js教程 Vue实现数字输入框中分割手机号码实例教程

手机号码,分割,输入

web前端-js教程

本文主要介绍了Vue实现数字输入框中分割手机号码的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

商务社交平台源码,vscode 无法输入代码,ubuntu卸载gpg,tomcat基本使用教程,开发爬虫,php定义字符串数组,深圳seo外包询价,源代码下载网站推荐,答题页面模板htmllzw

需求

php 招聘源码,ubuntu系统更改字体,项目名和tomcat不一致,爬虫框架大全集,生成二维码的php,seo 程序优化lzw

在移动端弹出系统数字键盘，输入手机号码的时候，使用344形式分割。

大型招聘网站源码,ubuntu文件拷贝指令,地铁上爬虫视频,php可以作为系统管理脚本么,网络seo基础lzw

分析：

首先，如果要在移动端弹出数字键盘，并且还可以有空格，那么就要使用type=”phone”的input框

如果要实现输入的时候增加空格，删除的时候减少空格，那么就要使用watch

手机号码为11位，加上两个空格，最多13位，因此要限定长度

代码实现

    
 var vm = new Vue({ el: '#app', data() {  return {  dataPhone: ''  } }, watch: {  // 通过watch来设置空格  dataPhone(newValue, oldValue) {  if (newValue.length > oldValue.length) { // 文本框中输入   if (newValue.length === 3 || newValue.length === 8) {   this.dataPhone += ' '   }  } else { // 文本框中删除   if (newValue.length === 9 || newValue.length === 4) {   this.dataPhone = this.dataPhone.trim()   }  }  } } })

大家学会了吗？赶紧动手尝试一下吧。

vue实现手机号码抽奖上下滚动动画实例分享

AngularJS 实现表单验证手机号功能

有关手机号类的文章推荐

手机号码