vue 前端模糊多条件input搜索的案例

以下是一个 Vue 前端模糊多条件 input 搜索的例子：

<template>
  <div>
    <input v-model="searchText" placeholder="Search by name or age">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 35 },
        { id: 4, name: 'David', age: 40 },
        { id: 5, name: 'Eva', age: 45 },
      ],
    };
  },
  computed: {
    filteredItems() {
      const search = this.searchText.toLowerCase();
      return this.items.filter((item) => {
        const nameMatch = item.name.toLowerCase().includes(search);
        const ageMatch = item.age.toString().includes(search);
        return nameMatch || ageMatch;
      });
    },
  },
};
</script>

在这个例子中，我们使用了一个 input 绑定了一个双向数据绑定的 v-model，用于实现搜索框的输入和搜索词的更新。然后使用 computed 计算属性过滤 items 数组，根据搜索词匹配 name 和 age 属性，将符合条件的项返回到 filteredItems 数组中。

这个例子中的模糊搜索采用了简单的 includes 方法实现，可以根据实际需求使用正则表达式等方法来实现更加复杂的搜索逻辑。