【vue】前端实现输入进行搜索
2021-02-26 本文已影响0人
歌声缓缓
输入过滤
<template>
<div class="hello">
<input type="text" v-model="searchName"></input>
<ul> <li v-for="(p,index) in filterPersons" :key="index">
{{index}}---{{p.name}}---{{p.age}} </li> </ul> </div>
</template>
<script>
export default
{
name: 'HelloWorld',
data(){
return {
searchName:"",
persons:[ {name:"zhangsan",age:9}, {name:"lisi",age:12}, {name:"wangwu",age:39}, {name:"zhaoliu",age:19} ] } },
computed:{
filterPersons(){
let {searchName,persons}=this;
let newPersons=persons.filter(p=>p.name.indexOf(searchName)>=0) return newPersons; }
}
</script>
