首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >18. Vue 常用列表操作实例 - 根据关键字实现数组的过滤

18. Vue 常用列表操作实例 - 根据关键字实现数组的过滤

作者头像
Devops海洋的渔夫
发布2020-03-19 17:22:23
1.5K0
发布2020-03-19 17:22:23
举报
文章被收录于专栏:Devops专栏Devops专栏

需求

前面介绍了列表操作中的数据新增、删除的功能,本篇章来看看关键字查询的功能。

处理步骤

  1. 在VM实例中定义关键字参数searchName.
        var vm = new Vue({
            el: '#app',
            data: {
                searchName:'', // 关键字
                ....
            },
  1. 要在筛选框绑定关键字数据到 VM 实例中的 searchName 属性,后续用来基于这个searchName来过滤数组数据。
<!-- 搜素关键字 -->
<input v-model="searchName" type="text" class="form-control" id="input_keywords" placeholder="输入关键字">

3.在使用 v-for 指令循环每一行数据的时候,不再直接 item in list,而是 in 一个 过滤的methods 方法,同时,把过滤条件searchName传递进去:

<tr v-for="item in search(searchName)" :key="item.id">
  1. 在VM实例的methods方法中定义过滤search()方法,在数据过滤的方法上,可以有两种处理方式。

4.1 首先创建一个新的数组newList,然后使用forEach方法遍历数据数组list,判断关键字searchName是否包含在遍历数据中,可以使用if (item.name.indexOf(searchName) != -1) 来进行判断,如果存在,那么则会为1,如果searchName为空值,则会0。在这种情况下,则将数据加入到新的数组newList中,然后提供列表渲染数据。

        methods: {
            search(searchName) {
                // 创建新的数组newList
                var newList = [];
                // 遍历数据,判断关键字是否存在,存在则加入newList中
                this.list.forEach(item => {

                    // 如果indexOf为-1,则说明关键字不存在该字符串中,
                    // 反之,存在或者searchName为空字符串
                    if (item.name.indexOf(searchName) !== -1) {
                        newList.push(item)
                    }

                });
                // 将过滤后的newList返回,提供列表数据渲染
                return newList
            },
        }

浏览器实现关键字搜索效果如下:

4.2 除了使用forEach遍历数组外,还可以使用filter过滤数组。上面使用forEach方法还要自己创建一个newList来处理数据,而filter则是直接返回数组,不需要单独去创建。还有上面使用if (item.name.indexOf(searchName) != -1)来判断关键字是否包含在字符串中,这里还可以使用includes方法。

注意 : 在ES6中,为字符串提供了一个新方法includes,叫做 String.prototype.includes('要包含的字符串'),如果包含,则返回 true ,否则返回 false

        methods: {

            search(searchName) {

                // 使用filter则是返回过滤的数据自动生成数组
                return this.list.filter(item => {
                    // 注意 : ES6中,为字符串提供了一个新方法,
                    // 叫做  String.prototype.includes('要包含的字符串')
                    //  如果包含,则返回 true ,否则返回 false
                    //  contain
                    if (item.name.includes(searchName)) {
                        return item
                    }
                })

            },
        }

浏览器实现关键字搜索效果如下:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 处理步骤
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档