vue 实现过滤
Vue 实现过滤的方法
在Vue中实现数据过滤可以通过多种方式，以下介绍几种常见的实现方法：
使用计算属性过滤
计算属性是Vue中实现数据过滤最常用的方式，它会自动缓存结果，只在依赖数据变化时重新计算：
<template>
<div>
<input v-model="searchText" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
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.searchText.toLowerCase())
)
}
}
}
</script>使用方法过滤
对于需要参数的复杂过滤逻辑，可以使用方法：
methods: {
filterItems(searchText) {
return this.items.filter(item =>
item.name.toLowerCase().includes(searchText.toLowerCase())
)
}
}使用watch监听过滤
当过滤逻辑较复杂或需要异步操作时，可以使用watch：
data() {
return {
searchText: '',
items: [...],
filteredItems: []
}
},
watch: {
searchText(newVal) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(newVal.toLowerCase())
)
}
}使用第三方库过滤
对于复杂的数据集，可以使用lodash等工具库：
import _ from 'lodash'
computed: {
filteredItems() {
return _.filter(this.items, item =>
item.name.toLowerCase().includes(this.searchText.toLowerCase())
)
}
}服务端过滤
对于大数据集，建议使用服务端过滤：
methods: {
async searchItems() {
const response = await axios.get('/api/items', {
params: { search: this.searchText }
})
this.filteredItems = response.data
}
}使用Vue过滤器
Vue过滤器适合简单的文本格式化：
filters: {
capitalize(value) {
if (!value) return ''
return value.toString().charAt(0).toUpperCase() + value.slice(1)
}
}在模板中使用：
<p>{{ message | capitalize }}</p>以上方法可以根据具体需求选择使用，计算属性适合大多数前端过滤场景，服务端过滤适合大数据量情况。
