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


Posted in Javascript onOctober 10, 2017

需求

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

分析:

  1. 首先,如果要在移动端弹出数字键盘,并且还可以有空格,那么就要使用type="phone"的input框
  2. 如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch
  3. 手机号码为11位,加上两个空格,最多13位,因此要限定长度

代码实现

<body>
 <div id="app">
 <!-- 类型为phone,最大长度为13 -->
 <input type="phone" v-model="dataPhone" maxlength="13">
 </div>
</body>
<script>
 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()
   }
  }
  }
 }
 })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jQuery is()函数用法3例
May 06 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
JS判断数组那点事
Oct 10 #Javascript
template.js前端模板引擎使用详解
Oct 10 #Javascript
AngularJS中table表格基本操作示例
Oct 10 #Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 #Javascript
JavaScript实现计数器基础方法
Oct 10 #Javascript
JS实现合并json对象的方法
Oct 10 #Javascript
jQuery实现的form转json经典示例
Oct 10 #jQuery
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
使用PHP开发留言板功能
2019/11/19 PHP
js null undefined 空区别说明
2010/06/13 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python回调函数用法实例分析
2015/05/09 Python
对Python 数组的切片操作详解
2018/07/02 Python
python中实现字符串翻转的方法
2018/07/11 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
浅谈django channels 路由误导
2020/05/28 Python
2013届毕业生求职信范文
2013/11/20 职场文书
土地转让协议书
2014/04/15 职场文书
大学生党员承诺书
2014/05/20 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2015年司法局工作总结
2015/05/22 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书