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中使用canvas方法和步骤，对此有需要的读者们参考学习下。2019-02-02
最近有个需求，一个列表上下移动要有简单过渡效果。本文通过实例代码给大家介绍Vue 列表上下过渡效果,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了如何利用Vue实现文件批量打包压缩下载功能，文中的实现步骤讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2022-07-07
本文主要介绍了Vue中keep-alive组件的使用方法和一些基础配置,keep-alive是Vue中的一个抽象组件,可以缓存组件实例,提高性能,本文给大家介绍vue中keep-alive组件使用和一些基础配置方法,感兴趣的朋友一起看看吧2024-10-10
本文通过实例代码给大家介绍了vue 中swiper的使用，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
本篇文章主要介绍了用vue.js和laravel实现微信支付，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue的异步数据更新机制与$nextTick用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
今天小编就为大家分享一篇vue-resource:jsonp请求百度搜索的接口示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
这篇文章主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。2017-12-12
最新评论