Vue模糊查询实现的思路

Vue模糊查询可以通过以下思路实现：

1. 定义一个数据列表和一个输入框，用于输入查询条件。
2. 监听输入框的变化，在输入框输入内容时触发查询。
3. 在查询函数中，遍历数据列表，将每一项与查询条件进行比较，如果匹配则将该项加入到一个新的数组中。
4. 将匹配的结果展示在页面上。

下面是一个简单的示例代码：

HTML部分：

<div id="app">
  <input type="text" v-model="query" @input="search">
  <ul>
    <li v-for="item in filteredList">{{ item }}</li>
  </ul>
</div>

Vue部分：

new Vue({
  el: '#app',
  data: {
    dataList: ['apple', 'banana', 'cherry', 'date', 'elderberry'],
    query: '',
    filteredList: []
  },
  methods: {
    search() {
      this.filteredList = [];
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].indexOf(this.query) !== -1) {
          this.filteredList.push(this.dataList[i]);
        }
      }
    }
  }
})

在这个例子中，我们定义了一个数据列表 `dataList`，一个查询条件 `query`，和一个结果列表 `filteredList`。在输入框中输入内容时，我们调用 `search` 方法进行查询。在 `search` 方法中，我们使用 `indexOf` 方法来判断每一项是否匹配查询条件，并将匹配的结果加入到 `filteredList` 中。最终，在页面上展示匹配的结果。