当前位置：首页 > VUE

vue实现搜索框查询

2026-02-23 07:21:44VUE

Vue实现搜索框查询的方法

数据绑定与v-model

在Vue中实现搜索功能，通常使用v-model指令实现输入框与数据的双向绑定。在组件的data中定义搜索关键词和结果列表：

data() {
  return {
    searchQuery: '',
    items: [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Cherry' }
    ]
  }
}

模板中使用v-model绑定输入框：

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

计算属性过滤

使用计算属性computed实时过滤数据，避免每次输入都手动触发搜索：

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

方法触发搜索

对于需要手动触发的搜索（如点击按钮），可使用方法：

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

模板中添加按钮：

<button @click="performSearch">Search</button>

防抖优化

频繁输入时通过防抖（debounce）减少计算次数，使用lodash.debounce：

import debounce from 'lodash.debounce'

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

输入框监听输入事件：

<input v-model="searchQuery" @input="debouncedSearch">

服务端搜索

若数据量较大，需通过API请求服务端搜索：

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

添加监听器触发搜索：

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

样式与交互优化

添加加载状态和空结果提示：

data() {
  return {
    isLoading: false,
    noResults: false
  }
}

methods: {
  async fetchSearchResults() {
    this.isLoading = true
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      })
      this.results = response.data
      this.noResults = this.results.length === 0
    } finally {
      this.isLoading = false
    }
  }
}

模板中显示状态：

vue实现搜索框查询

<div v-if="isLoading">Loading...</div>
<div v-else-if="noResults">No results found</div>

标签: vue

分享给朋友：

vue实现视频会议

使用 Vue 实现视频会议技术选型 Vue.js 作为前端框架，结合 WebRTC 技术实现实时音视频通信。常用的库包括： peerjs：简化 WebRTC 的点对点连接。 socket.io：用…

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具，jQuery 以 DOM 操作和事件驱动为核心，而 Vue.js 是数据驱动的现代化框架。如果想用 jQuery 实现类似 Vue 的功能（如…

vue实现逻辑

Vue 实现逻辑的核心概念 Vue.js 是一个渐进式 JavaScript 框架，其核心逻辑围绕数据驱动和组件化开发。通过响应式系统、虚拟 DOM 和组件生命周期等机制，Vue 实现了高效的前端开发…

vue 实现表单

Vue 表单实现方法 Vue.js 提供了多种方式实现表单，包括双向数据绑定、表单验证和动态表单生成。以下是常见的实现方法：基础表单绑定使用 v-model 指令实现表单元素与数据的双向绑定：…

vue实现按钮

Vue 实现按钮的方法使用原生 HTML 按钮在 Vue 模板中可以直接使用 HTML 的 <button> 元素，通过 v-on 或 @ 绑定点击事件。 <template&…

vue实现绘图

Vue 实现绘图的方法在 Vue 中实现绘图功能，可以通过多种方式实现，包括使用原生 HTML5 Canvas、第三方库（如 Fabric.js、Konva.js）或 SVG。以下是几种常见的实现方…

vue实现搜索框查询