vue实现查询

Vue 实现查询功能

在 Vue 中实现查询功能通常涉及数据绑定、事件处理和过滤逻辑。以下是几种常见的方法：

双向绑定与计算属性

通过 v-model 绑定输入框，利用计算属性动态过滤数据列表：

<template>
  <input v-model="searchQuery" placeholder="搜索...">
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      originalList: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.originalList.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Watch 监听查询

当需要异步操作时，可以使用 watch 监听查询变化：

watch: {
  searchQuery(newVal) {
    this.fetchData(newVal) // 调用API或其他异步操作
  }
}

结合第三方库

对于复杂搜索，可集成 lodash 的防抖函数优化性能：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    // 执行搜索逻辑
  }, 300)
}

服务端查询

若数据量较大，建议通过 API 提交查询参数到后端：

methods: {
  async search() {
    const res = await axios.get('/api/items', { 
      params: { q: this.searchQuery }
    })
    this.results = res.data
  }
}

注意事项

• 对输入内容进行大小写统一处理（如 toLowerCase()）
• 添加加载状态提示异步操作
• 空查询时应显示完整列表或友好提示