可以使用 Vue 的 v-model 指令与 input 事件来实现在 input 框中加入手机号码的正则表达式验证。
首先，在 input 标签中添加 v-model 指令，并绑定一个名为 phoneNumber 的变量：
<template> <div> <input type="tel" v-model="phoneNumber" @input="checkPhoneNumber"/> </div> </template>
接下来，在 Vue 实例的 methods 属性中定义一个 checkPhoneNumber 方法来验证手机号码。
export default { data() { return { phoneNumber: '' } }, methods: { checkPhoneNumber() { const phoneReg = /^1[3456789]\d{9}$/ if (!phoneReg.test(this.phoneNumber)) { this.phoneNumber = this.phoneNumber.slice(0, -1) // 如果不是有效的手机号码，则删除最后一位数字 } } } }
在 checkPhoneNumber 方法中，我们首先通过正则表达式 /^1[3456789]\d{9}$/ 验证输入的手机号码是否合法。如果不是合法的手机号码，则从字符串的末尾删除最后一个字符。
这样，每当用户在 input 框中输入一个字符时，都会触发 input 事件并执行 checkPhoneNumber 方法进行验证。如果输入的字符不符合要求，就会自动被删除。
注意，这里的 type="tel" 属性可以让输入框默认弹出数字键盘，更符合手机号码的输入需求。
