vue实现列表的过滤
实现列表过滤的方法
在Vue中实现列表过滤通常可以通过计算属性、方法或第三方库如lodash来完成。以下是几种常见的实现方式：
使用计算属性过滤列表
计算属性是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>使用方法过滤列表
如果过滤逻辑需要参数或更复杂，可以使用方法代替计算属性。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filterItems(searchQuery)" :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: '橙子' }
]
}
},
methods: {
filterItems(query) {
return this.items.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
)
}
}
}
</script>使用lodash进行高级过滤
对于更复杂的过滤需求，可以使用lodash的_.filter或_.debounce函数。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果', category: '水果' },
{ id: 2, name: '胡萝卜', category: '蔬菜' },
{ id: 3, name: '橙子', category: '水果' }
]
}
},
computed: {
filteredItems() {
return _.filter(this.items, item => {
return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) &&
item.category === '水果'
})
}
}
}
</script>使用watch和debounce优化性能
当过滤操作可能消耗较多资源时，可以使用watch配合debounce来优化性能。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
searchQuery: '',
filteredItems: [],
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
watch: {
searchQuery: _.debounce(function(newVal) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(newVal.toLowerCase())
)
}, 300)
},
created() {
this.filteredItems = this.items
}
}
</script>多条件过滤的实现
对于需要多个过滤条件的场景，可以组合多个计算属性或方法。
<template>
<div>
<input v-model="nameQuery" placeholder="按名称搜索...">
<input v-model="categoryQuery" placeholder="按类别搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }} ({{ item.category }})
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
nameQuery: '',
categoryQuery: '',
items: [
{ id: 1, name: '苹果', category: '水果' },
{ id: 2, name: '胡萝卜', category: '蔬菜' },
{ id: 3, name: '橙子', category: '水果' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
const nameMatch = item.name.toLowerCase().includes(this.nameQuery.toLowerCase())
const categoryMatch = item.category.toLowerCase().includes(this.categoryQuery.toLowerCase())
return nameMatch && categoryMatch
})
}
}
}
</script>服务器端过滤
对于大型数据集，可能需要将过滤逻辑移到服务器端。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索..." @input="fetchFilteredItems">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
searchQuery: '',
filteredItems: []
}
},
methods: {
fetchFilteredItems: _.debounce(async function() {
try {
const response = await axios.get('/api/items', {
params: { search: this.searchQuery }
})
this.filteredItems = response.data
} catch (error) {
console.error('获取数据失败:', error)
}
}, 300)
},
async created() {
await this.fetchFilteredItems()
}
}
</script>以上方法涵盖了Vue中实现列表过滤的常见场景，从简单的客户端过滤到复杂的服务器端过滤，开发者可以根据具体需求选择最适合的方案。
