vue实现筛选框
实现筛选框的基本思路
在Vue中实现筛选框通常涉及数据绑定、事件处理和列表渲染。筛选框可以基于用户输入动态过滤数据列表，提升交互体验。
基础实现示例
创建一个包含输入框和列表的组件，通过v-model绑定输入值，利用计算属性实时过滤数据：
<template>
<div>
<input v-model="searchQuery" placeholder="输入筛选关键词" />
<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: '橙子' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>支持多条件筛选
若需根据多个字段筛选，可扩展计算属性的逻辑：
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesName = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
const matchesCategory = item.category.toLowerCase().includes(this.categoryQuery.toLowerCase())
return matchesName && matchesCategory
})
}
}使用第三方库增强功能
对于复杂筛选需求，可借助lodash的防抖功能优化性能：
import { debounce } from 'lodash'
export default {
methods: {
handleSearch: debounce(function() {
// 筛选逻辑
}, 300)
}
}样式优化建议
为筛选框添加基础样式提升用户体验：
input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
width: 200px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #eee;
}注意事项
- 对于大数据量列表，建议添加虚拟滚动优化性能
- 敏感字符输入需做转义处理防止XSS攻击
- 移动端需确保输入框适配虚拟键盘
