vue 输入电话号码自动按3-4-4分割功能的实现代码
时间: 2024-03-08 08:46:43 浏览: 20
你可以使用 `v-model` 绑定输入框的值,并在其上添加 `@input` 事件监听用户输入。在事件处理函数中,使用正则表达式将电话号码按照 3-4-4 的格式分割并重新赋值给 `v-model`。以下是一个示例代码:
```html
<template>
<div>
<input v-model="phone" @input="formatPhone" placeholder="请输入电话号码">
</div>
</template>
<script>
export default {
data() {
return {
phone: '',
};
},
methods: {
formatPhone() {
// 去除非数字字符
let phoneNumber = this.phone.replace(/\D/g, '');
// 按 3-4-4 格式分割
const pattern = /^(\d{3})(\d{4})(\d{4})$/;
phoneNumber = phoneNumber.replace(pattern, '$1-$2-$3');
// 更新 v-model 的值
this.phone = phoneNumber;
},
},
};
</script>
```
在上述代码中,我们使用了正则表达式 `/^\d{3}\d{4}\d{4}$/` 来验证电话号码的格式是否符合 11 位数字。如果符合,则使用正则表达式 `$1-$2-$3` 来将电话号码分割成 3-4-4 的格式并赋值给 `phoneNumber` 变量。最后将 `phoneNumber` 赋值给 `v-model` 绑定的 `this.phone` 变量即可。