2. 程式人生 > >過濾資料以及陣列去重。2.0vue -- 飛機票專案

過濾資料以及陣列去重。2.0vue -- 飛機票專案

阿新 • • 發佈：2019-01-13
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) //過濾後的資料 } })

相關推薦

過濾資料以及陣列去重。2.0vue -- 飛機票專案

let vm = new Vue({ el:'#box', data:{ // 所有資料 dataAll:[], // 資料中轉 lists:[],

$.inArray jquery(以及陣列去重)

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title&

資料結構演算法題/陣列去重

package com.lee.wait; import java.util.Arrays; import java.util.HashSet; import java.util.Set; /**  * ArrayUniue 陣列去重的問題  */ public clas

JavaScript的函式（定義與解析、匿名函式、函式傳參、return關鍵字）和陣列（操作資料的方法、多維陣列、陣列去重）

函式 函式就是重複執行的程式碼片。 1、函式定義與執行 <script type="text/javascript"> // 函式定義 function aa(){ alert('hello!'); } // 函式執行

陣列去重，顯示重複的元素及個數。

 var arr = ['土豆','土豆','茄子','土豆','茄子','土豆','紫紅色'];     function qc(arr){         var resultObj = {};  

JS陣列專題2️⃣ ➖ 陣列去重

距離上次發文，已經有一段時間了，最近工作比較忙，這不眼看快雙十一了，就相當於給大家一些福利吧！ 一、什麼是陣列去重 簡單說就是把陣列中重複的項刪除掉，你 GET 到了嗎 ？下面我將簡單介紹下幾種基本的方法及其優缺點。 二、方法彙總 兩層迴圈 ** 無

JS 常用功能函式封裝，繼承、陣列去重、判斷資料型別

繼承方法封裝： var inherit =(function(){ var F = function(){}; return function(a,b){ F.prototype = b.prototype; a.prototype = new

JS陣列去重之利用set資料結構去重

在常用的JS去重方法中，都是通過迴圈遍歷來去重，難免麻煩了不少。這邊發現ES6中有更加方便的去重方式，記錄一下。 1、set資料結構 ES6提供了新的資料結構Set。類似於陣列，只不過其成員值都

談談含複雜資料型別的陣列去重問題

陣列去重是一個老生常談的問題。平常的處理可能只是對僅包含簡單資料型別的陣列進行操作，今天我們對複合資料型別做一個討論。 _.isEqual 要實現陣列去重，我們首先要有一個比較兩個資料是否相等的函式。Underscore.js給我們提供了一個很好的功能函式，名為：_.isE

iOS陣列去重的方法，超級簡單

//最近新發現的一個數組去重，用不著迴圈，一句程式碼搞定 //去除陣列中重複的 NSArray *oldArr = @[@"1",@"2",@"3",@"4",@"5",@"6",@"2",@"3"]; NSArray *newarr = [oldArr valueForKeyPath:

今天博主跟大家聊一下__陣列去重__！！ 【基本最全，從原始到高階，再到一句話！~是不是感覺很厲害哈！】

廢話不多說咱們直接看程式碼！！ 博主的審美不太好 湊合看哈！ <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8"> &nb

JavaScript 一維陣列、二維陣列去重方法

1.使用ES6語法 set方法陣列去重：： a=[1,2,3,4,1,2,3,4]; [...new Set(a)]; //[1, 2, 3, 4] 2.一維陣列去重方法 function unique1(array){ var n = []; //一個新的臨時陣列

js陣列去重與去扁平化

陣列去重 var arr = [1, 43, 4, 3, 2, 4, 3]; // 去重後 arr = [1, 43, 4, 3, 2] 傳統方法，for迴圈實現 function dedupe(arr) { var rets = []; f

JavaScript 實現陣列去重

JavaScript 實現陣列去重 演示Demo 陣列去重 // 方法一 function unique1(a) { var res = []; for (var i = 0, len = a.length; i < len; i++) { for (var j =

JS實現陣列去重方法總結(三種常用方法)

方法一： 雙層迴圈，外層迴圈元素，內層迴圈時比較值 如果有相同的值則跳過，不相同則push進陣列 Array.prototype.distinct = function(){  var arr = this,result = [], i,j,len = arr.length;  f

字元陣列去重

今天週五，剛剛完成了一個附件需求，心情還不錯，在逛公司util時發現了一個比較有用的方法，在這裡記錄下來。 import org.junit.Test; import java.util.ArrayList; import java.util.List; public class Demo

JavaScript陣列去重的四種方法

今天,剛剛參加了公司的筆試，關於陣列去重，後來簡單總結了幾種方法，希共勉，為我打call....... es5四種方式: 方式一: Array.prototype.unique1 = function() { // 1. 定義陣列 var temp = []; // 2. 遍歷當前陣列 f

手寫陣列去重

//本來以為挺簡單，還是天真，考慮，NaN,{}. 1：arr.splice(i+1,1);//表示插入刪除元素，表示刪除i+1個元素，1表示刪除一個 //手寫陣列去重            &

iOS-給陣列去重的幾個方法

導讀：iOS有幾種特殊的集合和方法，可以用於陣列去重。 1.利用NSDictionary的AllKeys（AllValues）方法 可以將NSArray中的元素存入一個字典，然後利用AllKeys或者AllValues取得字典的所有鍵或值，因為NSDictionary不會將Key相同

js利用indexof方法實現陣列去重

var arr = [1, 2, 1, 4, 3, 4, 2, 6, 8]; var newArr=[]; for(var i = 0; i < arr.length; i++) { if(newArr.indexOf(arr[i