vue实现input框搜索功能

要实现Vue中的输入框搜索功能，可以使用v-model指令来实现双向数据绑定，并结合computed属性来实现搜索过滤。

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

data() {
  return {
    searchQuery: '',
    searchResult: []
  }
}

然后，在模板中使用v-model指令将输入框的值与searchQuery进行绑定：

<input type="text" v-model="searchQuery" placeholder="输入关键字搜索">

接下来，可以使用computed属性来实现搜索过滤。在computed中定义一个名为filteredItems的属性，用于根据searchQuery筛选出匹配的结果：

computed: {
  filteredItems() {
    return this.items.filter(item => item.includes(this.searchQuery))
  }
}

在上述代码中，假设要搜索的目标数组为items。这里使用了Array的filter方法，根据searchQuery对数组进行过滤，并返回匹配的结果。

最后，在模板中展示搜索结果：

<ul>
  <li v-for="item in filteredItems" :key="item">{{ item }}</li>
</ul>

通过v-for指令遍历filteredItems数组，并将每个匹配的结果显示为列表项。

这样，当用户输入关键字时，输入框的值会自动更新searchQuery，computed属性会根据searchQuery筛选出匹配的结果并展示在页面上。