过滤数据以及数组去重。2.0vue -- 飞机票项目
大家好！ 我是杨小宝，项目马上结束，下几篇提供数据交互，以及渲染的难点。这一篇讲解过滤数据以及数组去重。效果：在项目中，我们会经常遇到 筛选 功能，那么既然需要筛选，我们就要用到数组的去重，数据的整理，等等。先上一张图，我们的要的效果是什么？知识：created钩子函数数组去重数据“中转”分析：1.首先我们请求下的来
·
大家好！ 我是杨小宝，项目马上结束，下几篇提供数据交互，以及渲染的难点。这一篇讲解过滤数据以及数组去重。
效果：
在项目中，我们会经常遇到 筛选 功能，那么 既然需要筛选，
我们的要的效果是什么？
知识：
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- 0
已为社区贡献6条内容
所有评论(0)