vue中正则表达式判断电话号码格式，如果输入有误则在输入框中出现红色提示，同时修改提示的位置

您好！针对您的问题，可以使用正则表达式来判断电话号码格式是否正确，然后利用Vue提供的v-bind和class绑定相关样式来显示红色提示。具体操作可以参照以下代码：

<template>
  <div>
    <label>电话号码：</label>
    <input type="text" v-model="phone" v-bind:class="{ 'input-error': isPhoneInvalid }" />
    <div v-if="isPhoneInvalid" class="error-tips">电话号码格式有误，请重新输入</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      phonePattern: /^1[3456789]\d{9}$/,//手机号正则
      isPhoneInvalid: false //是否显示手机号码提醒
    }
  },
  watch: {
    phone: function (newVal, oldVal) {
      if(!this.phonePattern.test(this.phone)){
        this.isPhoneInvalid = true;
      } else {
        this.isPhoneInvalid = false;
      }
    }
  }
}
</script>

<style>
.input-error {
  border: 1px solid red;
}
.error-tips {
  color: red;
}
</style>

代码中，利用Vue提供的v-bind:class绑定class样式，来根据isPhoneInvalid属性确定是否为错误的样式类'input-error'。同时，使用v-if来判断isPhoneInvalid属性是否为true，如果为true则显示error-tips类提示。最后，通过watch监听用户的输入并使用正则表达式来判断输入的电话号码格式是否正确。如果格式错误，将isPhoneInvalid设置为true，以便v-bind进行样式绑定及提示。

希望这个代码能够帮到你，如果还有其他问题，请继续问我。