vue中input框中的电话号码,输入后前3位空格一位,后面的每4位空格一位
时间: 2024-03-05 18:50:26 浏览: 23
跟上面的纯 JavaScript 实现方法类似,我们可以在 Vue 中通过 `v-model` 和触发 `@input` 事件来实现输入电话号码时,前三位空格一位,后面每四位空格一位的效果。
下面是一个例子:
```html
<template>
<div>
<input type="tel" v-model="phoneNumber" @input="formatPhoneNumber" placeholder="请输入电话号码">
</div>
</template>
<script>
export default {
data() {
return {
phoneNumber: ''
}
},
methods: {
formatPhoneNumber() {
// 去除输入中的空格
let phoneNumber = this.phoneNumber.replace(/\s/g, '');
// 根据长度添加空格
if (phoneNumber.length > 3) {
phoneNumber = phoneNumber.slice(0, 3) + ' ' + phoneNumber.slice(3);
}
if (phoneNumber.length > 8) {
phoneNumber = phoneNumber.slice(0, 8) + ' ' + phoneNumber.slice(8);
}
// 更新输入框的值
this.phoneNumber = phoneNumber;
}
}
}
</script>
```
在上面的代码中,我们通过 `v-model` 绑定了一个 `phoneNumber` 变量,当用户在输入框中输入电话号码时,该变量会被更新。同时,通过 `@input` 触发 `formatPhoneNumber` 方法,实现了电话号码自动格式化的效果。
需要注意的是,在 Vue 中使用 `v-model` 绑定输入框的值时,Vue 会自动将输入框的值和数据模型中的值进行双向绑定,这样当数据模型中的值被修改时,输入框的值也会自动更新。因此,在 `formatPhoneNumber` 方法中,我们直接更新了数据模型中的值,而不是直接修改输入框的值。