过滤数据以及数组去重。2.0vue -- 飞机票项目

来源：互联网发布：快速备案域名编辑：程序博客网时间：2024/04/27 17:07

大家好！我是杨小宝，项目马上结束，下几篇提供数据交互，以及渲染的难点。这一篇讲解过滤数据以及数组去重。

效果：

在项目中，我们会经常遇到筛选功能，那么既然需要筛选，
我们的要的效果是什么？
这里写图片描述

知识：

        created钩子函数        数组去重        数据“中转”

分析：

    1.首先我们请求下的来的数据 我们要先渲染到页面    2.将我们的所有请求下来的数据（要按照项目需求，按照那个字符段进行分类）进行筛选    3.我们选中我们想要的那个机场后，所有数据变成我们想要的机场对应数据    4.点击清空数据后，还原之前的数据

Demo :

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="vue.js"></script>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        li{            list-style: none;            padding: 10px 20px;            border-bottom: 1px solid black        }        p{            color: #ff0000;            display: inline-block;        }        h5{            padding-left: 100px;            display: inline-block;            padding-right: 100px;        }        span{            color: green;            padding-left: 10px;        }        #box3{            margin-top: 50px;        }        #box2{            position: relative;        }        #box2>h2{            cursor: pointer;        }        .boxdim{            position: absolute;            width: 400px;            height: 300px;            border: 1px solid #c8c8c8;            box-shadow: 3px 3px 5px #c8c8c8;            z-index: 99;            background: #fff;        }        .boxdim a{            padding: 5px 10px;            background: #000;            color: #fff;            text-decoration: none;            position: absolute;            right: 0;            bottom: 0;        }    </style></head><body>    <div id="box">        <div id="box2">            <h2 @click='boxBtn'>机场：(点击机场)</h2>            <p>我选择的机场有哪些：<span v-for='cityAir in cityAirArr'>{{cityAir}}</span><span style="cursor: pointer;" @click='clearAll'>清空过滤数据</span></p>            <div class="boxdim" v-show='boxdimShow'>                <ul>                    <li v-for='city in airportArr'>                        <input type="checkbox" :value='city' v-model='airportName'>                        <label>{{city}}</label>                    </li>                    <a href="javascript:;" @click='boxOk'>完成</a>                </ul>            </div>        </div>        <div id="box3">            请求下来的数据：            <ul>                <li v-for='list in lists'>                    <p>起飞城市：{{list.city}}</p>                    <h5>出发机场：{{list.airport}}</h5>                    <span>总价格：{{list.money}}</span>                </li>            </ul>        </div>    </div></body><script type="text/javascript">    let vm = new Vue({        el:'#box',        data:{            // 所有数据            dataAll:[],            // 数据中转            lists:[],            // 机场数据            airportArr:[],            // 机场筛选的box（div）            boxdimShow:false,            // input （复选框） 为true是  对应的 value 放进数组中            airportName:[],            // 中转数据到页面的  （我选择的机场有哪些）            cityAirArr:[]        },        methods:{            // 这个是 （机场） 点击事件 ，显现与隐藏            boxBtn(){                if (this.boxdimShow == false) {                    this.boxdimShow = true                }else{                    this.boxdimShow = false                }            },            //  过滤完成的点击事件            boxOk(){                // v-model 绑定所有 复选框  如果选中 就会把value的值添加到数组中                console.log(this.airportName)                this.cityAirArr = this.airportName                this.boxdimShow = false;                //  第六步 ： 首先 我们要通过 this.airportName 或者 this.cityAirArr 进行判断                //  如果长度 不为0 就让他 进行 页面总数据的筛选                if (this.cityAirArr.length != 0) {                    this.lists = [];                    // 第七步 ： 首先我们要循环 第一个数组就是 我们选中的数据的内容                     // 在循环 第二个数组  就是我们总 数据的数组  进行一一对比 如果 我们选中的                    // 机场数据 与 总数据一一比较后  把我们 想要的数据 在次push进我们的lists中 实现                    // 我们的过滤数据                     for (var i = 0; i < this.cityAirArr.length; i++) {                        for (var a  in this.dataAll) {                            if (this.cityAirArr[i] == this.dataAll[a].airport) {                                this.lists.push(this.dataAll[a])                            }                        }                    }                }else{                    this.lists = this.dataAll;                }            },            // 数据的还原  将我们所有数据全部清空，总内容再次赋值给lists             clearAll(){                this.cityAirArr = [];                this.lists = this.dataAll;                this.airportName = [];            }        },        created(){            // 第一步 ：模拟数据 假设 这个数组是我们请求下来的数据。             var ArrObj = [                {city:'北京',money:'1100',airport:'北京机场'},                {city:'上海',money:'1200',airport:'上海机场'},                {city:'成都',money:'1100',airport:'成都机场'},                {city:'广州',money:'2100',airport:'广州机场'},                {city:'北京',money:'1900',airport:'北京机场'},                {city:'北京',money:'1500',airport:'北京机场'},                {city:'上海',money:'1400',airport:'上海机场'},                {city:'成都',money:'1200',airport:'成都机场'},                {city:'北京',money:'1500',airport:'北京机场'},                {city:'上海',money:'1200',airport:'上海机场'},            ];            // 第二步 ： 我们将数据做一次中转 赋值 给  dataAll              this.dataAll = ArrObj;            // 第三步 ： 将我们数据 再次赋值 给lists  并渲染页面  （请看页面的 #box3）            this.lists = this.dataAll;            // 第四步：  将所有数据的机场信息 放进 要渲染的机场数组中（这里可以console一下，没有过滤）            for (var i = 0; i < ArrObj.length; i++) {                this.airportArr.push(ArrObj[i].airport)            }            console.log(this.airportArr)  // 为过滤时的数据            //第五步：  将我们所有机场信息的数据 进行过滤（数组去重）            for (var i = 0; i < this.airportArr.length; i++) {                for (var j = i + 1; j < this.airportArr.length; j++) {                    if (this.airportArr[i] == this.airportArr[j]) {                        this.airportArr.splice(j,1);                        j --;                    }                }            }            console.log(this.airportArr)  //过滤后的数据         }    })</script></html>

注意：

    1.数据之间的转换，千万要命名好，最好在data里面用一个对象来直接命名 这一整块的数据。    2.主要是复习一下数组去重以及过滤我们想要的数据。    3.有些数据前端可以处理 我们就不要去麻烦后端。因为前端也很强大    4.如果有更简单的方法 或者说 vue 中的 filter 过滤更简单可以私信我  QQ 992262716

下一章，模糊搜索简单处理（跟百度搜索框差不多） vue2.0

感谢您的阅读，我是小宝！

阅读全文

0 0