当前位置：首页 > 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 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。使用 Vue 内置过渡系统 Vue 的 <…

vue实现treeselect

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

vue实现加减

Vue 实现加减功能在 Vue 中实现加减功能可以通过数据绑定和事件监听来完成。以下是一个简单的实现方法：模板部分 <template> <div> <…

vue遮罩实现

实现 Vue 遮罩的常见方法使用 CSS 定位和透明度创建一个全屏遮罩层，通过 CSS 固定定位覆盖整个视口，并设置半透明背景色。 <template> <div cl…

vue实现例子

以下是一些常见的 Vue 实现例子，涵盖基础功能到进阶应用场景：基础数据绑定使用 v-model 实现双向数据绑定： <template> <div> &l…

vue博客实现

Vue 博客实现步骤项目初始化与基础配置使用 Vue CLI 或 Vite 创建项目，安装基础依赖如 vue-router 和状态管理库（如 pinia）。配置路由文件实现页面跳转逻辑，例如博客首…

vue实现搜索查询