vue纯前端模糊查询案例

以下是一个基于 Vue 的纯前端模糊查询案例：

HTML 代码：

<div id="app">
  <input type="text" v-model="searchTerm" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems">{{ item.name }}</li>
  </ul>
</div>

Vue 代码：

new Vue({
  el: '#app',
  data: {
    searchTerm: '',
    items: [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Cherry' },
      { name: 'Durian' },
      { name: 'Elderberry' }
    ]
  },
  computed: {
    filteredItems: function() {
      var searchTerm = this.searchTerm.toLowerCase();
      return this.items.filter(function(item) {
        return item.name.toLowerCase().indexOf(searchTerm) !== -1;
      });
    }
  }
});

在这个案例中，我们使用了一个输入框来获取用户的搜索词。使用 `v-model` 指令将输入框的值绑定到 Vue 实例中的 `searchTerm` 变量。

我们使用 `v-for` 指令来遍历 `filteredItems` 数组，该数组是通过 `computed` 属性中的 `filteredItems` 函数来计算得到的。这个函数使用 `filter()` 方法来过滤 `items` 数组，返回包含搜索词的项。在这里，我们使用了 `toLowerCase()` 方法来忽略大小写。

这个案例仅用于演示基本的纯前端模糊查询实现方式，实际上，如果需要更复杂的查询功能，我们可能需要使用更高级的算法和工具库。