vue中正则表达式判断电话号码格式，如果输入有误则在输入框中出现红色提示，当点击红色意识的时候，又可以从新输入

可以通过使用vue的自定义指令来实现对输入框中电话号码格式的判断以及相应提示的显示和隐藏。在使用自定义指令时，可以通过正则表达式来验证电话号码格式，如果格式有误就将输入框的边框或其他样式属性变为红色并显示错误提示信息，同时可以在红色提示信息上添加点击事件来使得当用户点击提示信息时可以将其隐藏并重新获取焦点进行输入。
以下为示例代码：

// 在vue实例中定义全局自定义指令v-phone-check
Vue.directive("phone-check", {
  // 指令绑定到元素时触发第一次钩子函数bind
  bind: function(el, binding) {
    el.handler = function() {
      // 正则表达式判断电话号码格式
      const reg = /^1[3456789]\d{9}$/;
      if (reg.test(el.value)) {
        el.style.borderColor = "";
        el.parentNode.querySelectorAll(".error-tip")[0].style.display = "none";
        // 验证通过，移除事件监听
        el.removeEventListener("input", el.handler);
        return true;
      } else {
        el.style.borderColor = "red";
        el.parentNode.querySelectorAll(".error-tip")[0].style.display = "block";
        return false;
      }
    };
    // 监听input事件, 实时触发验证逻辑
    el.addEventListener("input", el.handler);
  },
  // 元素与指令解绑时触发第三个钩子函数unbind
  unbind: function(el) {
    // 移除事件监听以避免内存泄漏
    el.removeEventListener("input", el.handler);
    delete el.handler;
  }
});

// element ui input组件示例
<el-form-item label="手机号码">
  <el-input v-model="phone" v-phone-check />
  <span class="error-tip">手机号码格式不正确，请重新输入</span>
</el-form-item>

上述代码中，我们在vue实例中定义了一个全局指令v-phone-check，并在el-input元素上绑定该指令。当用户在输入框中输入电话号码时，实时监听input事件，并通过正则表达式判断电话号码格式是否正确，若格式正确，则将输入框的边框或其他样式属性还原为默认值，并将错误提示信息的display设置为none，若格式错误，则将输入框的边框或其他样式属性变为红色，并将错误提示信息的display设置为block。同时，我们在指令解绑时移除了事件监听，以避免内存泄漏。