vue搜索栏功能实现
实现 Vue 搜索栏功能
基础搜索栏实现
在 Vue 中创建一个基础搜索栏需要绑定输入框的值到 data 属性，并使用计算属性或方法过滤数据。
<template>
<div>
<input v-model="searchQuery" placeholder="Search..." />
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
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())
)
}
}
}
</script>防抖优化
对于频繁触发的搜索输入，添加防抖功能可以优化性能。
<script>
import _ from 'lodash'
export default {
data() {
return {
searchQuery: '',
items: [...],
debouncedSearch: null
}
},
created() {
this.debouncedSearch = _.debounce(this.performSearch, 500)
},
methods: {
performSearch() {
// 实际搜索逻辑
}
},
watch: {
searchQuery() {
this.debouncedSearch()
}
}
}
</script>异步搜索实现
当需要从API获取搜索结果时，可以使用异步方法。
methods: {
async searchItems() {
try {
const response = await axios.get('/api/items', {
params: { q: this.searchQuery }
})
this.filteredItems = response.data
} catch (error) {
console.error(error)
}
}
}高级搜索功能
实现多条件搜索可以扩展搜索功能。
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesName = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
const matchesCategory = this.selectedCategory ? item.category === this.selectedCategory : true
return matchesName && matchesCategory
})
}
}搜索历史记录
添加搜索历史功能可以提升用户体验。
data() {
return {
searchHistory: []
}
},
methods: {
performSearch() {
if (this.searchQuery.trim()) {
this.searchHistory.unshift(this.searchQuery)
// 限制历史记录数量
if (this.searchHistory.length > 5) {
this.searchHistory.pop()
}
}
}
}样式优化
使用CSS美化搜索栏。
.search-container {
position: relative;
margin: 20px 0;
}
.search-input {
padding: 10px 15px;
width: 100%;
max-width: 400px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.search-results {
margin-top: 10px;
list-style: none;
padding: 0;
}这些方法涵盖了从基础到高级的Vue搜索栏实现，可以根据项目需求选择适合的方式或组合使用。
