// filter来筛选新数组,至于具体怎么去使用就看你要实现什么功能
data() {
return {
list: [
{id: '1', name: 'AAA'},
{id: '2', name: 'BBB'},
{id: '3', name: 'CCC'},
{id: '4', name: 'AAA'},
{id: '5', name: 'BBB'}
],
isSearch: 'BBB' // 这里是你要筛选的条件(可以绑定在input框动态赋值)
}
},
computed: {
labelLength(data) {
// 筛选数组下标name内的内容,只返回传进来的值相同的数组
return this.list.filter(value => {
// this.list的内容必须是数组,否则会报错,
// 如果是ajax动态赋值,必须在return里面的空值给中括号list:[]
return value.name.match(data)
})
}
},
<div v-for="(item,index) in labelLength(isSearch)" :key="index">
{{ item.name }}
</div>
// 返回新的数组
list: [
{id: '2', name: 'BBB'},
{id: '5', name: 'BBB'}
],
vue使用filter过滤器实现简单的搜索功能
最新推荐文章于 2024-07-22 16:40:45 发布