vue表单实现搜索
实现Vue表单搜索功能
在Vue中实现表单搜索功能通常涉及表单绑定、事件处理和搜索逻辑。以下是具体实现方法：
数据绑定与表单结构
使用v-model实现表单与Vue数据的双向绑定：
<template>
<div>
<input v-model="searchQuery" placeholder="输入搜索内容">
<button @click="performSearch">搜索</button>
</div>
</template>data() {
return {
searchQuery: '',
items: [], // 原始数据列表
filteredItems: [] // 过滤后的结果
}
}搜索逻辑实现
通过计算属性实现实时搜索：
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}或使用方法触发搜索：
methods: {
performSearch() {
this.filteredItems = this.items.filter(item =>
item.title.includes(this.searchQuery)
)
}
}高级搜索功能
实现多条件搜索：
data() {
return {
searchOptions: {
keyword: '',
category: '',
dateRange: []
}
}
},
methods: {
advancedSearch() {
return this.items.filter(item => {
const matchesKeyword = item.name.includes(this.searchOptions.keyword)
const matchesCategory = this.searchOptions.category
? item.category === this.searchOptions.category
: true
return matchesKeyword && matchesCategory
})
}
}防抖优化
使用lodash的防抖函数优化频繁搜索：
import { debounce } from 'lodash'
methods: {
search: debounce(function() {
// 搜索逻辑
}, 500)
}与后端API交互
结合axios实现远程搜索：
methods: {
async remoteSearch() {
try {
const response = await axios.get('/api/search', {
params: { q: this.searchQuery }
})
this.results = response.data
} catch (error) {
console.error(error)
}
}
}搜索结果展示
在模板中展示搜索结果：
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>表单验证
添加简单的表单验证：
methods: {
validateAndSearch() {
if (this.searchQuery.trim() === '') {
alert('请输入搜索内容')
return
}
this.performSearch()
}
}
