vue的搜索框实现
实现Vue搜索框的基本方法
在Vue中实现搜索框功能可以通过多种方式完成，主要涉及数据绑定、事件处理和列表过滤。
模板部分
<template>
<div>
<input
type="text"
v-model="searchQuery"
placeholder="搜索..."
@input="handleSearch"
/>
<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: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
],
filteredItems: []
}
},
methods: {
handleSearch() {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
},
mounted() {
this.filteredItems = [...this.items]
}
}
</script>使用计算属性优化性能
计算属性会自动缓存结果，当依赖项不变时不会重复计算，适合搜索场景。
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>添加防抖功能
频繁触发搜索会影响性能，可以使用防抖技术优化。
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
searchQuery: '',
items: [],
filteredItems: []
}
},
methods: {
handleSearch: debounce(function() {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}, 300)
}
}
</script>结合后端API实现搜索
当数据量较大时，建议将搜索逻辑放到后端。
<script>
export default {
data() {
return {
searchQuery: '',
searchResults: []
}
},
methods: {
async searchAPI() {
try {
const response = await axios.get('/api/search', {
params: { q: this.searchQuery }
})
this.searchResults = response.data
} catch (error) {
console.error('搜索出错:', error)
}
}
}
}
</script>样式美化建议
可以为搜索框添加基础样式提升用户体验。
<style scoped>
input[type="text"] {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
width: 300px;
font-size: 16px;
}
ul {
list-style: none;
padding: 0;
margin-top: 10px;
}
li {
padding: 8px;
border-bottom: 1px solid #eee;
}
</style>高级功能扩展
对于更复杂的需求，可以考虑以下扩展：
- 添加搜索历史记录
- 实现自动补全功能
- 支持多条件筛选
- 添加加载状态指示器
- 实现键盘快捷键导航
这些实现方式可以根据项目需求组合使用，构建出符合特定场景的搜索功能。
