当前位置：首页 > VUE

vue实现搜索查询

2026-03-28 03:46:33VUE

Vue 实现搜索查询功能

数据绑定与搜索逻辑

在 Vue 组件中定义搜索关键词和数据列表

data() {
  return {
    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())
    )
  }
}

模板实现

搜索输入框绑定

<input 
  type="text" 
  v-model="searchQuery" 
  placeholder="Search..."
>

显示过滤结果

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

优化搜索性能

添加防抖处理减少频繁计算

import _ from 'lodash'

methods: {
  debouncedSearch: _.debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

模板中使用防抖方法

<input 
  @input="debouncedSearch($event.target.value)"
>

服务器端搜索实现

使用 axios 发起搜索请求

methods: {
  async searchItems() {
    try {
      const response = await axios.get('/api/items', {
        params: { q: this.searchQuery }
      })
      this.items = response.data
    } catch (error) {
      console.error(error)
    }
  }
}

监听搜索词变化

watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) {
      this.searchItems()
    }
  }
}

样式增强

添加加载状态

data() {
  return {
    isLoading: false
  }
}

methods: {
  async searchItems() {
    this.isLoading = true
    // ...请求逻辑
    this.isLoading = false
  }
}

模板显示加载状态

vue实现搜索查询

<div v-if="isLoading">Searching...</div>

标签: vue

分享给朋友：

vue里实现增删改查

在Vue中实现增删改查数据初始化在Vue组件的data中定义初始数据和表单绑定的变量： data() { return { items: [ { id: 1, name:…

vue实现视窗

Vue 实现视窗功能在 Vue 中实现视窗功能通常涉及监听浏览器窗口大小变化、响应式布局或创建自定义弹窗组件。以下是几种常见实现方式：监听浏览器窗口大小变化使用 Vue 的 mounted 和…

js实现vue

Vue.js 的基本实现方法在 JavaScript 中实现 Vue.js 的功能，可以通过直接引入 Vue 库或使用现代构建工具（如 Vite 或 Webpack）。以下是几种常见的实现方式：…

vue实现iframe

Vue 中实现 iframe 的方法在 Vue 项目中，可以通过多种方式实现 iframe 的嵌入。以下是几种常见的方法：使用原生 HTML iframe 标签直接在 Vue 组件的模板中使用…

vue 实现回复

Vue 实现回复功能在 Vue 中实现回复功能通常涉及表单提交、数据绑定和列表渲染。以下是实现步骤和代码示例：数据绑定与表单 <template> <div>…

vue实现treeselect

Vue TreeSelect 实现方法使用 Vue 实现 TreeSelect 组件可以通过以下几种方式完成，包括使用现成的第三方库或自行封装组件。使用第三方库推荐使用成熟的第三方 TreeS…

vue实现搜索查询