当前位置：首页 > VUE

用vue实现搜索查询

2026-02-09 15:16:59VUE

实现搜索查询的基本思路

在Vue中实现搜索查询功能，通常需要结合v-model指令进行数据绑定，并使用计算属性或方法对数据进行过滤。核心步骤包括绑定输入框、处理用户输入、过滤数据列表和展示结果。

创建Vue实例和数据

需要准备一个Vue实例，并定义数据列表和搜索关键词。搜索关键词将与输入框进行双向绑定。

new Vue({
  el: '#app',
  data: {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
})

绑定搜索输入框

在模板中使用v-model指令将输入框与searchQuery绑定。当用户输入时，searchQuery会自动更新。

<div id="app">
  <input type="text" v-model="searchQuery" placeholder="Search...">
</div>

过滤数据列表

使用计算属性实现数据过滤逻辑。计算属性会根据searchQuery的变化自动重新计算。

用vue实现搜索查询

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

显示搜索结果

在模板中遍历过滤后的数据列表，展示搜索结果。

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

完整示例代码

将上述部分组合起来，形成一个完整的搜索功能实现。

用vue实现搜索查询

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

<script>
new Vue({
  el: '#app',
  data: {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
})
</script>

优化搜索性能

对于大型数据集，可以考虑以下优化措施：

添加防抖功能，减少频繁触发过滤
使用Web Worker进行后台过滤
实现分页加载结果

添加搜索提示

可以增加UI反馈，当没有搜索结果时显示提示信息。

<p v-if="filteredItems.length === 0">No results found.</p>

多字段搜索

如果需要搜索多个字段，可以修改过滤逻辑。

filteredItems() {
  return this.items.filter(item => 
    item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
    item.description.toLowerCase().includes(this.searchQuery.toLowerCase())
  )
}

标签: vue