<template>
<div>
<div>
<el-input v-model="searchInputValue" style="margin: 0 auto; width: 80%;"></el-input>
<div v-for="(n,i) in searchData" :key="i">
<div>{{n.name}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchInputValue: '',
dailyLeftTypeList:[
{
name:'水果'
},
{
name:'蔬菜'
},
{
name:'肉类'
},
{
name:'水产'
},
{
name:'干果'
},
{
name:'调料'
},
{
name:'干货'
},
{
name:'糕点'
},
{
name:'熟食'
}
]
};
},
computed:{
searchData(){
let searchInputValue = this.searchInputValue;
//如果存在,根据条件过滤
if(searchInputValue){
return this.dailyLeftTypeList.filter(function (daily) {
return Object.keys(daily).some(function (key) {
return String(daily[key]).toLowerCase().indexOf(searchInputValue)>-1;
})
})
}
//如果不存在,整体返回
return this.dailyLeftTypeList;
}
}
};
</script>
vue中实现“模糊搜索”
最新推荐文章于 2024-08-12 16:28:19 发布