vue 數(shù)據(jù)遍歷篩選過(guò)濾排序的應(yīng)用操作

更新時(shí)間：2020年11月17日 09:44:56 作者：v折耳

這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選過(guò)濾排序的應(yīng)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue 中對(duì)v-for 遍歷數(shù)據(jù)的處理方式可以分為兩類：

一.對(duì)data 直接賦值（比較笨，但是比較直接）

<div id="app">
  <ul>
   <li v-for="item in list">{{item.n}}</li>
  </ul>
 </div>
 </body>

<script>
  var app=new Vue({
   el:'#app',
   data:{
    list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
   }
  })
 </script>

使用 app.list=[{n:44},{n:55},{n:66},{n:11},{n:22},{n:33}]直接賦值改變html頁(yè)面的顯示。

但是有時(shí)候這樣會(huì)改動(dòng)原數(shù)據(jù)，不太友善，很多時(shí)候我們只是想做個(gè)排序，數(shù)據(jù)篩選。

推薦使用第二種方法

方法二：使用computed 方法來(lái)過(guò)濾篩選數(shù)據(jù);也可以使用methods 方式來(lái)篩選過(guò)濾數(shù)據(jù)

代碼如下：

<body>
 <div id="app">
  <ul>
   <li v-for="item in list">{{item.n}}</li>
  </ul>
  <ul>
   <li v-for="item in listCmputed">{{item.n}}</li>
  </ul>
  <ul>
   <li v-for="item in listMe(list)">{{item.n}}</li>
  </ul>
 
 </div>
 </body>

<script>
  var app=new Vue({
   el:'#app',
   data:{
    list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
   },
   computed:{
    listCmputed:function(){
     return this.list.filter(function(item){
      return item.n>=33
     })
    }
   },
   methods:{
    listMe:function(list){
      return list.filter(function(item){
      return item.n<=33
     })
    }
   }
  })
 </script>

效果圖

可以看到 computed 和methods對(duì)data的處理并沒(méi)有影響到原數(shù)據(jù)。

但在實(shí)際應(yīng)用中，常常會(huì)對(duì)一組數(shù)據(jù)進(jìn)行排序，篩選，過(guò)濾.....等一些列產(chǎn)品運(yùn)行提的需求；所以會(huì)有一些各種形狀的按鈕需要點(diǎn)擊觸發(fā)事件，我覺(jué)得用在外面聲明一個(gè)變量放數(shù)據(jù)，根據(jù)事件對(duì) vue 中的數(shù)據(jù)重新賦值，反而邏輯更清晰更便于維護(hù)。

補(bǔ)充知識(shí)：v-for循環(huán)遍歷:vue-商品列表查詢數(shù)據(jù)分類顯示，json數(shù)據(jù)格式的解析

以餓了么來(lái)舉例吧，我們要顯示下圖畫線框里面的食物信息，數(shù)據(jù)是遍歷json數(shù)據(jù)出來(lái)的，

json數(shù)據(jù)在呢？結(jié)構(gòu)是醬紫的哭數(shù)組里面放了多個(gè)對(duì)象。對(duì)象里面放了數(shù)組的同時(shí)又放了若干對(duì)象，我們要實(shí)現(xiàn)上圖的效果（將套餐類，特色雞公煲套餐分類顯示），就要把foods這個(gè)數(shù)組里面的name,description,tips顯示出來(lái)尷尬

怎么做呢？

首先要用v-for得到goods.json里的每個(gè)對(duì)象，把它存到goods: [],數(shù)組中并返回。下面就是查詢數(shù)據(jù)的的代碼塊了

 data() {
  return {
  goods: [],
  }
 },
 
 created() {
  this.goodsList();
 
 },
 methods: {
  goodsList() {
  var tempList = [];
  var self = this;
  this.http.get('static/goods.json').then(function(response) {
   self.goods = response.data;
   console.log(self.goods)
 
  }).catch(function(error) {
   console.log(error);
  }) 
  } 
 } 

console.log(self.goods) 打印一下：有7條數(shù)據(jù)

然后，將這些數(shù)據(jù)通過(guò)htm標(biāo)簽拼接顯示出來(lái)就好了，棒棒噠~~

。。。。。。。。。

吃瓜的：額，不對(duì)吧，這就顯示了？有點(diǎn)太容易了吧。。。

吃瓜的：數(shù)據(jù)沒(méi)解析完全吧？

吃瓜的。。。。

我：額。。。我去HTML里面繼續(xù)解析。。

吃瓜的：吐血中。。。

接下來(lái)是我們切換下片場(chǎng)，來(lái)到HTML。。。

重頭戲1：遍歷goods數(shù)組，獲取對(duì)象（上面剛剛返回出來(lái)了goods）

<dl v-for="items in goods">

因?yàn)間oods里面裝的全是對(duì)象，所以就可以把“套餐類”和“特色雞公煲套餐”顯示粗來(lái)了:

<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>

重頭戲2：遍歷foods數(shù)組

<dd class="fooddetails_root clearfix" v-for="it in items.foods">

這就可以將foods數(shù)組里面的對(duì)象和數(shù)組獲取到了,顯示食物名稱，描述，價(jià)格，月售

<!--顯示食物名稱-->
<p>{{it.name}}</p>  
<!--顯示食物評(píng)價(jià)-->
<p>{{it.description}}</p>
<!--顯示食物月售幾份-->
<p>{{it.tips}}</p>
<!--食物價(jià)格-->
<p>{{it.specfoods[0].price}}</p>

OK了

下面是全部的html代碼:

<div class="food_wrapper fl">
<dl v-for="items in goods">  <!--遍歷goods數(shù)組-->
<dt class="category_title"><strong class="category_name" >{{items.name}}</strong></dt>
<!--得到對(duì)象里面的foods數(shù)組-->
<dd class="fooddetails_root clearfix" v-for="it in items.foods"> 
<!--顯示圖片-->
<span class="img_logo fl" style="height: 71px;"><img :src="it.image_path" alt="" /></span>
<section class="fooddetails_info fl">
<!--顯示食物名稱-->
<p>{{it.name}}</p>  
<!--顯示食物評(píng)價(jià)-->
<p>{{it.description}}</p>
<!--顯示食物月售幾份-->
<p>{{it.tips}}</p>
<!--食物價(jià)格-->
<p>{{it.specfoods[0].price}}</p> 
 
</section>
</dd>
</dl> 
</div>

以上這篇vue 數(shù)據(jù)遍歷篩選過(guò)濾排序的應(yīng)用操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: