列表过滤案例-输入框输入内容过滤出符合条件的

最新推荐文章于 2022-06-15 11:45:41 发布

wanghuohuo1998

最新推荐文章于 2022-06-15 11:45:41 发布

阅读量284

点赞数

分类专栏： vue小案例

本文链接：https://blog.csdn.net/wanghuohuo1998/article/details/118441504

版权

Vue 计算属性数据过滤姓名搜索实时更新

关键词由CSDN通过智能技术生成

vue小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<body>
    <!-- 
      想要对数据加工后再展示，且不想破坏原数据，最好用计算属性。
    -->
    <!-- 准备好一个容器-->
    <div id="root">
      <h2>人员列表</h2>
      <input v-model="keyWord" type="text" placeholder="请输入姓名">
      <ul>
        <li v-for="(p,index) in fmtPersons" :key="p.id">
          {{p.name}}--{{p.sex}}--{{p.age}}岁
        </li>
      </ul>
    </div>

    <script type="text/javascript" >
      new Vue({
        el:'#root',
        data:{
          keyWord:'',
          persons:[
            {id:'001',name:'马冬梅',age:35,sex:'女'},
            {id:'002',name:'周冬雨',age:20,sex:'女'},
            {id:'003',name:'周杰伦',age:41,sex:'男'},
            {id:'004',name:'温兆伦',age:25,sex:'男'},
          ]
        },

        //使用computed过滤，优势：不影响原数据
        computed:{
          fmtPersons(){
            const {persons,keyWord} = this
            return persons.filter( p => p.name.indexOf(keyWord) !== -1)
          }
        }

        //在watch修改原数据，会导致原数据的丢失
        /* watch:{
          keyWord(value){
            const arr = this.persons.filter( p => p.name.indexOf(value) !== -1)
            this.persons = arr//这里修改了原数组
          }
        } */
      })
    </script>
  </body>

原生js中的filter（过滤）方法

filter 方法返回一个新数组, 包含通过所提供函数实现的测试的所有元素。

var newArray = arr.filter(callback(item,index,thisArr))

说明：

callback：测试函数

item：当前元素

index：当前索引

thisArr:调用了 filter 的数组本身

newArray：返回的新数组，包含所有通过测试的元素。

indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(searchvalue,fromindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

**注释：**indexOf() 方法对大小写敏感！

**注释：**如果要检索的字符串值没有出现，则该方法返回 -1。

wanghuohuo1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表过滤案例-输入框输入内容过滤出符合条件的

<body>   <div id="root"> <h2>人员列表</h2> <input v-model="keyWord" type="text" placeholder="请输入姓名"> <ul> <
复制链接

扫一扫