Vue用纯js写模糊查询

可以使用 Vue.js 的计算属性 (computed) 来实现模糊查询。以下是一个简单的示例代码：

HTML:

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

JavaScript:

new Vue({
  el: '#app',
  data: {
    items: ['apple', 'banana', 'orange', 'pear'],
    searchText: ''
  },
  computed: {
    filteredItems: function() {
      var self = this;
      return this.items.filter(function(item) {
        return item.toLowerCase().indexOf(self.searchText.toLowerCase()) >= 0;
      });
    }
  }
});

在上面的代码中，我们定义了一个计算属性 filteredItems，该属性通过过滤 items 数组中的元素来实现模糊查询。在过滤函数中，我们将搜索文本和数组元素都转换为小写字母，然后使用 indexOf 方法来判断是否包含搜索文本。最后，我们在 HTML 中使用 v-for 指令来遍历 filteredItems 数组并显示结果。

当用户输入搜索文本时，filteredItems 计算属性会自动重新计算，并且只会显示符合条件的结果。这种做法可以让我们避免手动更新 DOM，让代码更加简洁和易于维护。