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 相关文章推荐
jQuery和AngularJS的区别浅析
Jan 29 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
详解javascript中的Error对象
Apr 25 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
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
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
JavaScript中自定义事件用法分析
2014/12/23 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
计算机应用专业推荐信
2013/11/13 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
管理工程专业求职信
2014/08/10 职场文书
司考复习计划
2015/01/19 职场文书
小时代观后感
2015/06/10 职场文书