Vue实现数字输入框中分割手机号码的示例
更新时间：2017年10月10日 14:46:43 作者：negivup
本篇文章主要介绍了Vue实现数字输入框中分割手机号码的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
需求
在移动端弹出系统数字键盘，输入手机号码的时候，使用344形式分割。
分析：
- 首先，如果要在移动端弹出数字键盘，并且还可以有空格，那么就要使用type="phone"的input框
- 如果要实现输入的时候增加空格，删除的时候减少空格，那么就要使用watch
- 手机号码为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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
这篇文章主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
在本篇文章里小编给大家整理的是一篇关于Vue3.0的优化总结内容，有需要的朋友们可以学习下。2020-10-10
这篇文章主要介绍了vue中的虚拟dom知识点总结，文章围绕主题内容展开详细介绍，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-04-04
本篇文章主要介绍了Vue不能检测到Object/Array更新的情况的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了解决Vue-cli无法编译es6的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家介绍了帮助我们高效操作Virtual DOM简单实现及原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要给大家介绍了关于vue实现简易计算器的4种方法,文中通过代码介绍的非常详细,对大家学习或者使用vue觉有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了使用vue制作滑动标签，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
本文章向大家介绍vue组件中的数据共享，主要包括vue组件中的数据共享使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下2022-11-11
最新评论