vue中数组中的字符串进行摸索搜索过滤

在Vue.js中，如果你想要对数组中的字符串内容进行模糊搜索或过滤，你可以使用`filter()`函数结合正则表达式来实现这个功能。这是一个基本的示例：

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search...">
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
    };
  },
  computed: {
    filteredItems() {
      // 使用正则表达式的replace()方法去除空格并将输入转换为小写
      const term = this.searchTerm.trim().toLowerCase();
      
      // 如果term为空，返回所有原数组
      if (!term) return this.items;

      // 使用filter()方法，如果数组元素的小写形式包含term，则返回该元素
      return this.items.filter(item => item.toLowerCase().includes(term));
    },
  },
};
</script>

在这个例子中，当你在输入框中输入文字时，`filteredItems`计算属性会实时更新，只显示匹配搜索词的数组元素。