第八篇 filter过滤器

在之前的几篇内容中我们已经比较多次的使用到v-for指令基于一个数组来做列表渲染的一个内容，这一次我们同样是需要用到v-for指令来完成一个小案例，内容是通过filter过滤器来实现一个模糊查询的功能，内容还是从最简单的内容讲起；

filter

有一个数组 arr = [ 1, 2, 3, 4, 5, 6 ]，现在需要找出一个数组当中>3的数字显示出来，当然我们的眼睛扫一下就知道了是4，5，6，那么如果是有100条甚至更多呢，这时候我们就需要对数组进行一个处理，当然不能对原数组造成影响，假设我们的商品数据中有100条，如果对原数组造成影响是不是意味着我们的商品数据就会处理掉，这是不符合需求的。

使用filter过滤数组 —— 基于原始数据进行过滤不造成影响

简单的例子：

<script>
    var arr = [ 1, 2, 3 , 4, 5, 6 ]; //原始数据
    var newArr =  []; //过滤之后的数组
    newArr = arr.filter(item=>item>3){
        //输出过滤之后的数组
        console.log("newArr",this.newArr);
    }
</script>

以上就简单的讲一下filter过滤数组的简单应用，接下来做一个小综合，实现一个模糊的查询。

模糊查询-filter过滤器

实现搜索效果，进行模糊查询，过滤匹配

监听input 数据框中value 值的改变；
使用过滤方法对原数组进行过滤；
对原数组进行覆盖；

1.监听 input框中value值的变化，监听value的改变@input

<div id="app">
    <input type="text" @input="listenInput" />
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            listenInput(evt){
                console.log(evt.target.value);
            }
        }
    })
</script>

2.模拟后台的data数据内容显示

<div id="app">
    <input type="text" @input="listenInput" />
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:['alin','dsad','weqq','nbcf','dasd','asds'],       //后台传输过来的数据
            originList:['alin','dsad','weqq','nbcf','dasd','asds']  //原始数据
        },
        methods:{
            listenInput(evt){
                console.log(evt.target.value);
            }
        }
    })
</script>

3.进行模糊查询，将数据显示出来

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:['alin','dsad','weqq','nbcf','dasd','asds'],       //后台传输过来的数据
            originList:['alin','dsad','weqq','nbcf','dasd','asds']  //原始数据
        },
        methods:{
            listenInput(evt){
                // console.log(evt.target.value);
                this.list  = this.originList.filter(item=>item.includes(evt.target.value))
                console.log(this.list,this.originList)
            }
        }
    })
</script>

以上就时通过filter过滤器将原数据当中我们想要筛选的数据拿出来并不对原数据的内容造成影响实现的这么一个简单的模糊查询，通过监听的方式获取到对应value变化，从而进行一个事件的处理，再通过v-for指令完成一个列表的渲染。下一篇内容我们继续来对这个小案例来结合之前的知识进行一个挖掘，我们下一期再会了，喜欢的朋友可以点赞关注下，欢迎大家的交流学习！

html javascript vue.js 前端前端前端框架

第八篇 filter过滤器 - 模糊查询

filter

模糊查询-filter过滤器

相关文章