Vue如何实现数字输入框中分割手机号码功能
这篇文章主要介绍Vue如何实现数字输入框中分割手机号码功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和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如何实现数字输入框中分割手机号码功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！