vue 搜索框列表实现
Vue 搜索框列表实现
在 Vue 中实现搜索框列表功能，通常涉及数据绑定、过滤和渲染列表。以下是具体实现方法：
数据绑定与搜索输入
创建 Vue 实例或组件，定义数据模型和搜索输入框：
<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>计算属性过滤
使用计算属性 filteredItems 根据搜索词过滤列表项。toLowerCase() 确保搜索不区分大小写，includes() 检查项目名称是否包含搜索词。
样式优化
为搜索框和列表添加基本样式：
<style scoped>
input {
padding: 8px;
width: 200px;
margin-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 5px;
border-bottom: 1px solid #eee;
}
</style>异步数据加载
如果数据需要从 API 获取，可以使用 created 钩子或 mounted 钩子加载数据：
export default {
data() {
return {
searchQuery: '',
items: []
}
},
async created() {
const response = await fetch('https://api.example.com/items')
this.items = await response.json()
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}使用第三方库
对于更复杂的搜索功能，可以集成第三方库如 Fuse.js 实现模糊搜索：
import Fuse from 'fuse.js'
export default {
data() {
return {
searchQuery: '',
items: [],
fuse: null
}
},
created() {
this.loadItems()
},
methods: {
async loadItems() {
const response = await fetch('https://api.example.com/items')
this.items = await response.json()
this.fuse = new Fuse(this.items, {
keys: ['name'],
threshold: 0.3
})
}
},
computed: {
filteredItems() {
if (!this.searchQuery) return this.items
return this.fuse.search(this.searchQuery).map(result => result.item)
}
}
}性能优化
对于大型列表，考虑使用虚拟滚动（如 vue-virtual-scroller）减少 DOM 节点数量：
import { RecycleScroller } from 'vue-virtual-scroller'
export default {
components: { RecycleScroller },
// 其余代码相同
}<RecycleScroller
class="scroller"
:items="filteredItems"
:item-size="32"
key-field="id"
>
<template v-slot="{ item }">
<div>{{ item.name }}</div>
</template>
</RecycleScroller>以上方法提供了从基础到高级的 Vue 搜索框列表实现方案，可根据项目需求选择适合的方式。
