在Vue中实现输入框搜索功能也有多种方法，以下是其中一种常见的做法：
1. 创建一个Vue组件，用于处理搜索逻辑和展示搜索结果。
<template><div>
<input v-model="searchText" @input="handleSearch" placeholder="输入关键字搜索">
<ul>
<li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
};
},
computed: {
searchResults() {
if (this.searchText) {
return this.list.filter(item => {
return item.name.toLowerCase().includes(this.searchText.toLowerCase());
});
} else {
return this.list;
}
},
},
methods: {
handleSearch() {
// 可以在这里进行其他处理，例如发送网络请求获取搜索结果
},
},
};
</script>
在上面的示例中，我们使用了一个输入框（<input>）来获取用户的搜索关键字，并使用v-model指令将输入框的值绑定到searchText数据属性上。
在computed计算属性中，我们根据searchText的值对列表项进行过滤。如果searchText不为空，则使用filter()方法来过滤列表项，只显示包含搜索关键字的项；如果searchText为空，则返回完整列表。
在模板中使用v-for指令遍历searchResults，并通过:key绑定每个列表项的唯一标识符。
可以根据需要自定义样式、添加更多搜索条件或使用其他方法来实现输入框搜索功能。另外，在handleSearch方法中，你可以进行其他处理，例如发送网络请求获取搜索结果。