vue 数据列表筛选(前端搜索无需请求接口)computed

<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>
原文地址:https://www.cnblogs.com/james-L/p/14298967.html