当前位置：首页 > VUE

前端vue实现条件查询

2026-02-21 03:00:05VUE

实现条件查询的基本思路

在Vue中实现条件查询通常需要结合表单输入、数据绑定和过滤逻辑。核心是通过v-model绑定查询条件，利用计算属性或方法对数据进行筛选。

数据准备与绑定

准备一个数据列表和查询条件对象，使用v-model将表单输入与查询条件绑定：

data() {
  return {
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' }
    ],
    query: {
      name: '',
      category: ''
    }
  }
}

<input v-model="query.name" placeholder="Search by name">
<select v-model="query.category">
  <option value="">All Categories</option>
  <option value="Fruit">Fruit</option>
  <option value="Vegetable">Vegetable</option>
</select>

计算属性实现过滤

使用计算属性实现实时过滤，避免直接修改原始数据：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return (
        item.name.toLowerCase().includes(this.query.name.toLowerCase()) &&
        (this.query.category === '' || item.category === this.query.category)
      )
    })
  }
}

方法实现查询（适合复杂逻辑）

对于需要手动触发的查询或复杂逻辑，可以使用方法：

methods: {
  search() {
    this.filteredResults = this.items.filter(item => {
      // 自定义过滤逻辑
    })
  }
}

结合第三方库优化

对于大型数据集，考虑使用lodash的_.debounce实现防抖：

import { debounce } from 'lodash'

methods: {
  search: debounce(function() {
    // 查询逻辑
  }, 500)
}

服务端查询实现

当数据来自后端API时，需要发送查询参数并获取结果：

前端vue实现条件查询

async search() {
  const params = {
    name: this.query.name,
    category: this.query.category
  }
  const response = await axios.get('/api/items', { params })
  this.items = response.data
}