vue2 模糊查询搜索框

Vue2模糊查询搜索框是一种常见的前端组件，用于在输入框中输入关键字后，实时展示与关键字匹配的搜索结果。以下是一个简单的实现方式：

1. 首先，在Vue组件中定义一个data属性，用于保存输入框的值和搜索结果：

data() {
  return {
    keyword: '', // 输入框的值
    searchResults: [] // 搜索结果
  }
}

2. 在模板中使用`<input>`元素绑定输入框的值，并使用`v-model`指令实现双向数据绑定：

<input type="text" v-model="keyword" />

3. 使用计算属性来实时过滤搜索结果。在计算属性中，根据输入框的值和搜索条件，返回匹配的结果：

computed: {
  filteredResults() {
    return this.searchResults.filter(result => {
      return result.includes(this.keyword);
    });
  }
}

4. 在模板中使用`v-for`指令遍历过滤后的搜索结果，并展示在页面上：

<ul>
  <li v-for="result in filteredResults" :key="result">{{ result }}</li>
</ul>

至此，一个简单的Vue2模糊查询搜索框就完成了。你可以根据自己的需求进行样式和功能的扩展。