Vue实现数字输入框中分割手机号码的示例
程序员文章站
2022-03-07 16:58:19
需求
在移动端弹出系统数字键盘，输入手机号码的时候，使用344形式分割。
分析：
首先，如果要在移动端弹出数字键盘，并且还可以有空格，那么就要使用type...
需求
在移动端弹出系统数字键盘，输入手机号码的时候，使用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中的数据绑定原理的实现