vue中使用正则

在Vue中使用正则表达式的方式和在普通的JavaScript代码中使用是一样的。下面是一些在Vue中使用正则的例子：

1. 使用正则验证表单输入：

<template>
  <div>
    <input type="text" v-model="email" />
    <button @click="handleSubmit">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
    };
  },
  methods: {
    handleSubmit() {
      const emailRegex = /\S+@\S+\.\S+/;
      if (emailRegex.test(this.email)) {
        // 邮箱格式正确，执行后续操作
      } else {
        // 邮箱格式不正确，提示用户重新输入
      }
    },
  },
};
</script>

2. 使用正则过滤列表数据：

<template>
  <div>
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Cherry" },
        { id: 4, name: "Durian" },
      ],
      filterKeyword: "",
    };
  },
  computed: {
    filteredList() {
      const keywordRegex = new RegExp(this.filterKeyword, "i");
      return this.list.filter((item) => keywordRegex.test(item.name));
    },
  },
};
</script>

在上面的例子中，使用了一个正则表达式来过滤列表数据。当用户输入关键字时，使用正则表达式匹配列表中的每个item的name属性，过滤掉不符合条件的项，返回一个新的过滤后的列表。