vue正则表达式判断输入的电话号码，如果有误提示为红色

您好！关于您的问题，可以使用vue中的computed属性和正则表达式来判断电话号码输入是否正确，并通过绑定class的方式来提示错误信息为红色。

具体方法如下：

1. 在Vue组件中定义一个phone变量，用于存储用户输入的电话号码。

2. 使用computed属性来判断手机号码是否正确，如果正确返回true，否则返回false。

3. 在模板中使用v-bind:class指令来绑定class，根据computed属性返回的结果动态修改class，如果手机号码不正确则添加class名为"error"，否则不添加任何class。

4. 定义一个error class，设置颜色为红色，用于提示错误信息。

代码示例：

<template>
<div>
<label>电话号码:</label>
<input type="text" v-model="phone" :class="{ 'error': !isValidPhone }">
<div v-show="!isValidPhone" class="error-msg">电话号码格式不正确！</div>
</div>
</template>

<script>
export default {
data() {
return {
phone: '',
};
},
computed: {
// 判断手机号码是否合法
isValidPhone() {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
return reg.test(this.phone);
},
},
};
</script>

<style>
.error {
border-color: red;
}

.error-msg {
color: red;
}
</style>