多平台统一管理软件接口,如何实现多平台统一管理软件接口
287
2023-03-27
Vue实现数字输入框中分割手机号码的示例
需求
在移动端弹出系统数字键盘,输入手机号码的时候,使用344形式分割。
分析:
首先,如果要在移动端弹出数字键盘,并且还可http://以有空格,那么就要使用type="phone"的input框
如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch
手机号码为11位,加上两个空格,最多13位,因此要限定长度
代码实现
var vm = new vue({
el: '#app',
data() {
return {
dataPhone: ''
}
},
watch: {
// 通过watch来设置空格
dataPhone(newValue, oldValue) {
if (newValue.length > oldValue.length) { // 文本框中输入
if (newValuhttp://e.length === 3 || newValue.length === 8) {
this.dataPhone += ' '
}
} else { // 文本框中删除
if (newValue.length === 9 || newValue.length === 4) {
this.dataPhone = this.dataPhone.trim()
}
}
}
}
})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~