当前位置：首页 > 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
    }
  }
}

模板中显示状态：

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

vue实现搜索框查询

标签: vue

分享给朋友：

vue全选实现

Vue 全选实现方法在 Vue 中实现全选功能通常涉及数据绑定和事件处理。以下是几种常见的实现方式：基础实现方式 <template> <div> <i…

vue实现批量

Vue 实现批量操作的方法在 Vue 中实现批量操作通常涉及选择多个项目并执行统一处理，例如批量删除、批量更新等。以下是几种常见实现方式：表格多选批量操作使用 el-table 配合复选框实现…

vue实现groupbox

Vue 实现 GroupBox 组件在 Vue 中实现类似 GroupBox 的效果可以通过自定义组件完成。GroupBox 通常是一个带有标题的边框容器，用于将相关控件分组显示。基本实现方法…

vue nexttrick实现

Vue 中 nextTick 的实现原理 nextTick 是 Vue 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行延迟回调。它利用了 JavaScript 的事件循环机制，确保回调在…

vue实现 treegrid

Vue 实现 TreeGrid 的方法使用现成组件库 Element UI、Ant Design Vue 等流行组件库提供了现成的 TreeTable/TreeGrid 组件，可直接使用。 Ele…

vue实现画板

Vue 实现画板功能在 Vue 中实现画板功能可以通过 HTML5 的 Canvas API 实现。以下是一个完整的实现方案：创建 Vue 组件新建一个 Vue 单文件组件（SFC），命名为…

vue实现搜索框查询