<template>
<div>
<input placehoder=‘请输入姓名搜索‘ v-model=‘searchName’ />
<ul>
<li v-for = ‘(item,index) in filterPersons‘ :key=‘index‘>姓名:{{item.name}}--年龄:{{item.age}}</li>
</ul>
</div>
</template>
<script>
export default{
name:‘filter‘,
data(){
return{
searchName:‘‘.//搜索关键词
persons:[
{name:‘张三‘,age:19},{name:‘李四,age:29},{name:‘王五‘,age:20},
]
}
},
computed{
filterPersons(){
let {persons,searchName} = this;
let arr = [...persons];
//过滤数组
if(searchName.trim()){
arr = persons.filter(v=> v.name.indexOf(searchName) == 0 )
}
return arr
}
}
}
</script>
vue 数据列表筛选(前端搜索无需请求接口)computed
原文:https://www.cnblogs.com/james-L/p/14298967.html