Vue——列表过滤

最新推荐文章于 2024-05-16 10:38:04 发布

Coding-弱鱼

最新推荐文章于 2024-05-16 10:38:04 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_47412580/article/details/126428004

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.关于列表过滤的使用

在vue使用的过程中，某些时刻需要对数据进行过滤，得到我们所需要的数据。

2.关于过滤的使用方法

首先使用watch函数，来实现对于关键字的侦听

（1）第一步搭建结构

搭建结构之后，就是使用vue来获取查询的姓名信息。

（2）进行与vue的双向绑定，来获取input框里的信息。

<input type="text" placeholder="请输入查询姓名" v-model="keyWord">

获取input框里的文字了之后，该对于输入文字，对原数组进行筛选。然后再把筛选的值放进新的数组里面。

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            // 在data里面放置首先是persons,数组对象
            keyWord: '',
            persons: [{
                id: '001',
                name: 'ZXY',
                sex: 'man',
                age: 18
            },
            {
                id: '002',
                name: 'LDH',
                sex: 'man',
                age: 19
            },
            {
                id: '003',
                name: 'HH',
                sex: 'women',
                age: 29
            }
            ],
            filPersons: []
        },
        watch: {
            // 对获取的keyword数据进行一个侦听
            keyWord: {
                // 是回调函数
                immediate: true,
                handler(val) {
                    this.filPersons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1
                        // !=-1意思就是说查不到该元素
                    })
                }
            }
        }
    })
</script>

在keyWord关键字之中，handler检测到输入框变化才会把筛选的给新数组，这时候加入立即执行指令，就可以直接执行handler函数。

解释filter为什么是箭头函数，我们常说在vue管理的函数都写成普通函数，但是此时filter函数是windows管理的，使用this函数可以让它往上找，从而找到vm。

<body>
    <div id="root">
        <h3>人员信息列表</h3>
        <input type="text" placeholder="请输入查询姓名" v-model="keyWord">
        <ul>
            <!-- 在使用v-for in 进行遍历的时候，就必须给每一个遍历的对象给一个特定的标识
            id -->
            <li v-for="p in filPersons" :key="p.id">
                {{p.name}}---{{p.age}}
            </li>
        </ul>

    </div>
</body>

这里进行遍历，则是对于新数组filPersons进行遍历。

3.结果呈现

完美的实现了需求。

关于使用计算属性的方法来完成需求，

 computed: {
            filPersons() {
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    })