vue2.x正则表达式

在 Vue 2.x 中，你可以使用正则表达式来进行字符串的匹配和校验。下面是一些在 Vue 2.x 中使用正则表达式的示例：

1. 字符串匹配：

<template>
  <div>
    <p v-if="isEmailValid">Email is valid</p>
    <p v-else>Email is not valid</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: 'example@example.com'
    };
  },
  computed: {
    isEmailValid() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(this.email);
    }
  }
}
</script>

2. 表单校验：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="password" :class="{ 'is-invalid': !isPasswordValid }" type="password" placeholder="Password">
    <p v-if="!isPasswordValid">Password must contain at least one uppercase letter, one lowercase letter, and one number</p>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      password: ''
    };
  },
  computed: {
    isPasswordValid() {
      const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
      return passwordRegex.test(this.password);
    }
  },
  methods: {
    submitForm() {
      if (!this.isPasswordValid) {
        return;
      }
      // 表单验证通过，执行提交操作
    }
  }
}
</script>

在上述示例中，我们使用 `test()` 方法来检测字符串是否与正则表达式匹配。如果匹配成功，则返回 `true`，否则返回 `false`。根据匹配结果，我们可以在模板中使用条件语句来显示相应的提示信息或应用样式。

这些示例展示了如何在 Vue 2.x 中使用正则表达式进行字符串匹配和表单校验。你可以根据自己的需求和具体场景来调整和扩展这些示例。