在vue使用foreach迭代数组进行模糊查询

在 Vue 中，你可以使用 `forEach` 方法迭代数组进行模糊查询。以下是一个简单的示例代码：

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="search">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Grapes' }
      ]
    };
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase();
      return this.items.filter(item => item.name.toLowerCase().includes(query));
    }
  },
  methods: {
    search() {
      // 在此处可以执行其他逻辑操作
    }
  }
};
</script>

上述示例代码中，我们在模板中添加了一个文本输入框用于输入搜索关键字，并在 `@input` 事件中调用 `search` 方法。`search` 方法会根据输入的搜索关键字（即 `searchQuery`）对数组进行模糊查询，并返回匹配的结果。

在 `filteredItems` 计算属性中，我们使用 `filter` 方法迭代数组 `items`，并通过 `includes` 方法判断每个数组项的名称是否包含搜索关键字。最后，将匹配的结果渲染到模板中的列表项中。

请注意，这只是一个基本的示例，你可以根据自己的需求进行修改和扩展。