vue2如何实现模糊查询

在Vue2中，可以通过使用computed属性和filter过滤器来实现模糊查询。具体步骤如下：

1. 在data中定义一个用于存储搜索关键字的变量，例如searchText。

2. 在模板中创建一个输入框，用于输入搜索关键字。可以使用v-model指令将输入框的值与searchText变量绑定起来。

3. 创建一个computed属性，用于返回符合搜索关键字的数据列表。在这个computed属性中，可以使用filter过滤器来进行模糊查询。

   computed: {
     filteredList() {
       return this.list.filter(item => {
         return item.name.toLowerCase().includes(this.searchText.toLowerCase())
       })
     }
   }

在这个例子中，假设数据列表中每个项都有一个name属性，我们可以使用filter方法来过滤出符合搜索关键字的项。在filter方法中，我们用toLowerCase()方法将搜索关键字和每个项的name属性都转换为小写字母，这样可以忽略大小写进行比较。使用includes()方法来判断一个字符串是否包含另一个字符串。

4. 在模板中，可以通过v-for指令来渲染filteredLists中的数据列表。

   <ul>
     <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
   </ul>

在这个例子中，假设每个项都有一个唯一的id属性，我们可以使用:key指令来为每个列表项指定一个唯一的key值。

这样，我们就可以通过输入关键字来实现列表的模糊查询了。