当前位置：首页 > VUE

vue 实现查询

2026-02-17 21:39:44VUE

Vue 实现查询功能

在 Vue 中实现查询功能通常涉及以下几个步骤：

数据绑定与输入处理

使用 v-model 绑定输入框的值到 Vue 实例的数据属性。例如，在模板中添加一个输入框：

<input v-model="searchQuery" placeholder="输入查询内容" />

在 Vue 实例的 data 中定义 searchQuery 和原始数据列表：

vue 实现查询

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
}

计算属性过滤数据

通过计算属性动态过滤数据，避免直接修改原始数据。计算属性会根据 searchQuery 的变化自动更新：

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

渲染过滤结果

在模板中遍历计算属性 filteredItems 显示过滤后的结果：

vue 实现查询

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

优化性能

对于大型数据集，可以添加防抖（debounce）减少频繁触发过滤。使用 Lodash 的 _.debounce 或在方法中手动实现：

methods: {
  debouncedSearch: _.debounce(function() {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

异步数据查询

如果需要从 API 获取数据，可以在 watch 中监听 searchQuery 变化并调用接口：

watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) { // 避免短查询
      this.fetchData(newVal)
    }
  }
},
methods: {
  async fetchData(query) {
    const response = await axios.get(`/api/items?q=${query}`)
    this.items = response.data
  }
}