vue2.x正则表达式校验手机号

在 Vue 2.x 中，你可以使用正则表达式来校验手机号。下面是一个示例：

<template>
  <div>
    <input v-model="phone" :class="{ 'is-invalid': !isPhoneValid }" type="text" placeholder="Phone number">
    <p v-if="!isPhoneValid">Invalid phone number</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    };
  },
  computed: {
    isPhoneValid() {
      const phoneRegex = /^[1][3-9]\d{9}$/;
      return phoneRegex.test(this.phone);
    }
  }
}
</script>

在上述示例中，我们使用正则表达式 `/^[1][3-9]\d{9}$/` 来校验手机号。该正则表达式的含义如下：
- `^`：以此开始
- `[1]`：第一位为数字1
- `[3-9]`：第二位为数字3到9之间的任意一个数字
- `\d{9}`：后面接着9个数字
- `$`：以此结束

这个正则表达式可以匹配以数字1开头，第二位为数字3到9之间的任意一个数字，后面跟着9个数字的手机号码。

通过将用户输入的手机号与正则表达式进行匹配，我们可以得到是否符合手机号的校验结果。根据校验结果，我们可以在模板中使用条件语句来显示相应的提示信息或应用样式。

你可以根据自己的需求和具体场景来调整和扩展这个示例。