首页 > 其他 > 详细

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

时间:2021-01-19 19:53:02      阅读:135      评论:0      收藏:0      [点我收藏+]

<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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!